innerHTM 和 textContent

innerHTML 是获取/设置 标签的内容

1、获取：是获取元素内的所有内容

<div class="one" id="box">我是div
    <span>我是一个span</span>
    <p>我是一个p</p>
</div>    
<script>
    let box = document.getElementById('box');
    console.log(box.innerHTML);
</script>

 

2、设置：会覆盖所有的内容。如果设置的内容包含了标签，会解析这个标签

box.innerHTML = '天生我才<b>必有用</b>;  //b标签会被解析，‘必有用’会变成粗体

textContent 是获取/设置 文本的内容

1、获取：是获取元素内的所有文本（包括自己的文本和后代所有元素的文本）

<div class="one" id="box">我是div
    <span>我是一个span</span>
    <p>我是一个p</p>
</div>    
<script>
    let box = document.getElementById('box');
    console.log(box.innerHTML);
</script>

2、设置：会覆盖所有的内容。如果设置的内容包含了标签,不会解析出来,只会当做文本的一部分

box.innerHTML = '天生我才<b>必有用</b>'; //b标签不会解析，输出:天生我才<b>必有用</b>

  

补充：ie老浏览器支持 innerHTML，一些新的浏览器也还支持

textContent 是W3C的标准属性，但是ie老浏览器等不支持

标签：box,获取,标签,textContent,innerHTML,innerHTM,必有用,文本
来源： https://blog.csdn.net/jerisem/article/details/119383932