innerText和innerHTML的区别

innerHTML和innerText都是元素的属性，通过修改这个元素的属性可以达到修改元素内容的目的。但是二者之间略有不同。具体来说，它们的区别如下：

• innerHTML可以获取或设置元素内部的HTML内容，包括HTML标签，而innerText则只返回纯文本内容，会自动去掉HTML标签。
• innerHTML处理速度相对较快，而innerText处理速度较慢。
• 在获取值时，如果元素内部只有文本内容，innerText和innerHTML得到的值相同。但是，如果元素内部包含HTML标签，那么innerText只会返回标签中的文本内容，而innerHTML则会返回所有的HTML代码。

以下是一个示例，演示如何获取和设置innerHTML和innerText的值：

Html

<div id="myDiv">

<p>hello world</p>

<p>hello <span>everyone</span></p>

</div>

<script>

const myDiv = document.getElementById('myDiv');

console.log(myDiv.innerHTML); // 输出<div id="myDiv"><p>hello world</p><p>hello <span>everyone</span></p></div> console.log(myDiv.innerText); // 输出hello worldhello everyone myDiv.innerHTML = '<h1>新标题</h1>';

console.log(myDiv.innerHTML); // 输出<h1>新标题</h1>

myDiv.innerText = '新内容';

console.log(myDiv.innerHTML); // 输出<h1>新内容</h1>

</script>