DOM操作元素文本内容：innerHTML、innerText、value

本文链接：https://blog.csdn.net/a1598452168YY/article/details/127394709

操作元素文本内容的方法有三种：innerHTML、innerText、value

(1) 第一种：innerHTML：能够解析内容中的html标签

<body>
    <div id="box">
        hello world
        <div>111</div>
        <p></p>
    </div>
    <script>
        //innerHTML:既可以获取操作文本内容，也可以获取操作标签内容
        console.log(box.innerHTML)
    </script>
</body>

结果：

结论：box.innerHTML既获取到了父div标签里面的文本内容“hello world”也获取到了标签内容“<div>111</div>”，而且这个div标签也被获取到了，那就是可以解析html标签。

注意：innerHTML是获取和操作元素内的文本内容的，如果html标签内容没有内容，也不会解析这个html标签，只有当这个html标签里有内容时，才会解析这个html标签，例如代码中的p标签，里面没有内容，所以也就不会解析这个p标签了。

想更改父标签div里面的内容，直接给box.innerHTML赋值，代码如下：

//修改box元素的内容,会解析li标签，
box.innerHTML = '<li>1111</li>'
console.log(box.innerHTML) // => 结果：<li>1111</li>

(2) 第二种：innerText：只能获取或设置内容，但不解析html标签

<body>
    <div id="box">
        hello world
        <div>111</div>
    </div>
    <script>
        // innerText:只获取内容，不解析html标签
        console.log(box.innerText)
    </script>
</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里面放的就是文本内容，我们可以直接通过调用自己的属性来获取文本，代码如下：

<body>
    <input type="text" value="1111" id="ipt">
    <script>
        // value:获取自己本身的文本内容，也就是value值
        console.log(ipt.value)
        // ipt.value = "222" //更改value值
    </script>
</body>

结果：