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>