DOM操作元素文本内容：innerHTML、innerText、value
操作元素文本内容的方法有三种：innerHTML、innerText、value
(1) 第一种：innerHTML：能够解析内容中的html标签
1 <body> 2 <div id="box"> 3 hello world 4 <div>111</div> 5 <p></p> 6 </div> 7 <script> 8 //innerHTML:既可以获取操作文本内容，也可以获取操作标签内容 9 console.log(box.innerHTML) 10 </script> 11 </body>
结果：
结论：box.innerHTML既获取到了父div标签里面的文本内容“hello world”也获取到了标签内容“<div>111</div>”，而且这个div标签也被获取到了，那就是可以解析html标签。
注意：innerHTML是获取和操作元素内的文本内容的，如果html标签内容没有内容，也不会解析这个html标签，只有当这个html标签里有内容时，才会解析这个html标签，例如代码中的p标签，里面没有内容，所以也就不会解析这个p标签了。
想更改父标签div里面的内容，直接给box.innerHTML赋值，代码如下：
1 //修改box元素的内容,会解析li标签， 2 box.innerHTML = '<li>1111</li>' 3 console.log(box.innerHTML) // => 结果：<li>1111</li>
(2) 第二种：innerText：只能获取或设置内容，但不解析html标签
1 <body> 2 <div id="box"> 3 hello world 4 <div>111</div> 5 </div> 6 <script> 7 // innerText:只获取内容，不解析html标签 8 console.log(box.innerText) 9 </script> 10 </body>
结果：
结论：看上面结果，innerText只能获取box标签所有的文本内容，包括子div标签里面“111”也能获取到，但是不解析div标签。
当我们给innerText赋值时，html标签是不解析，它会把你这个标签当成文本来处理，代码如下：
// 不解析html标签
box.innerText = '<li>1111</li><div>222</div>'
//把标签当做文本内容，不解析html标签
console.log(box.innerText) // => 结果：<li>1111</li><div>222</div>
结果：
解释说明：看结果因为innerText只会获取文本内容，而不解析html，所以当你给innerText赋值标签时，结果会把li标签和div标签看成文本，不会给你解析成li和div标签的格式。。
(3) 第三种：value：获取标签内部自带属性的文本
例如：input这类本身就有自带value属性的标签，value里面放的就是文本内容，我们可以直接通过调用自己的属性来获取文本，代码如下：
1 <body> 2 <input type="text" value="1111" id="ipt"> 3 <script> 4 // value:获取自己本身的文本内容，也就是value值 5 console.log(ipt.value) 6 // ipt.value = "222" //更改value值 7 </script> 8 </body>
结果：
————————————————
版权声明：本文为CSDN博主「陌一一」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/a1598452168YY/article/details/127394709
