JavaScript中innerText和innerHTML的区别是什么？

Question

如题所述

Answer 1

innerText返回或者设置DOM元素的文本

innerHTML返回或者设置DOM元素的子元素

1，返回值的区别

12345678

<div id="div1">      <p>文本信息</p></div><script>    var div =document.getElementById("div1");     var text = div1.innerText; // text --》文本信息    var html= div1.innerHTML; // html--》 <p>文本信息</p></script>

区别：取值时 innerText会把只会获取节点里面的文本信息，而innerHTML 会获取节点下面的所有标签。

2、设置值得区别

123456

<div id="div1"></div><script>    var div =document.getElementById("div1");     div1.innerText= '这里是文本信息换行'; //看效果一    div1.innerHTML= '这里是文本信息换行';//看效果二</script>

效果一

效果二

区别：设置值时 innerText会把html标签当做普通的文本显示，而innerHTML 则不会。

在javascript中如果我们要获取对象内容，js为我们提供了三种方法outerhtml、innerhtml和innertext,但他们之间具体怎么使用与具体的区别在哪里，可能很多人不知道吧，接下来跟着小编一起来学习innerHTML，innerText，outerHTML的用法及区别吧。

在javascript中如果我们要获取对象内容，js为我们提供了三种方法outerhtml、innerhtml和innertext,但他们之间具体怎么使用与具体的区别在哪里，可能很多人不知道吧，接下来跟着小编一起来学习innerHTML，innerText，outerHTML的用法及区别吧。

Answer 2

如果使用innerHTML，获得的是根元素div内包含的所有节点，所以获得的内容为<div>my csdn</div>hello world。

用innerText时，所获得的仅仅是文本节点，于是得到的内容不包含DOM节点，得到的内容为纯文本“my csdn hello world”。

test.innerHTML: 也就是从对象的起始位置到终止位置的全部内容,包括Html标签。 test.innerHTML的值也就是“<span style="color:red">test1</span> test2 ”。

test.innerText: 从起始位置到终止位置的内容, 但它去除Html标签 text.innerTest的值也就是“test1 test2”, 其中span标签去除了。

test.outerHTML: 除了包含innerHTML的全部内容外, 还包含对象标签本身。 text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>