innerHTML与innerText的区别
innerHTML和innerText都是元素的属性,通过修改这个元素的属性可以达到修改元素内容的目的。但是二者之间略有不同
innerHTML
表示元素所有的后代html。该范围包括文本节点,注释节点,元素节点等内容。在读写该属性时,我们可以获取一个字符串,这个字符串包括元素内部的内容,包含空格,换行,注释。
innerText
表示元素所有的文本内容,包括文本节点,子元素和后代元素的文本节点。值得注意的是不包括注释内容,设置样式为display为none的话,也不会包含在内。
示例
<html>
<head><title>innerHTML与innerText的区别</title></head>
<body>
<div id="div1">
<p id="p1">hello world </p>
</div>
<script>
var div1 = document.getElementById("div1");
alert(div1.innerHTML); // <p id="p1">hello world </p>
alert(div1.innerText) // hello world
</script>
</body>
</html>
innerHTML指的是***从对象的起始位置到终止位置的全部内容,包括Html标签*。
innerText 指的是从起始位置到终止位置的内容,但它去除Html标签**。
示例(赋值)
<body>
<button>显示当前系统时间</button>
<div>某个时间</div>
<script>
// 当我们点击了按钮,div里面的文字会发生改变
// 1获取元素
var btn = document.querySelector('button')
var oDiv = document.querySelector('div')
// 2 注册事件
btn.onclick = function () {
// oDiv.innerText = '2022-8-10'
// oDiv.innerHTML = '2022-8-10'
// oDiv.innerText = "<a href='#'>超链接</a>"
oDiv.innerHTML = "<a href='#'>超链接</a>"
/*
区别:
innerText不识别html标签,去掉空格和换行
innerHTML识别html标签,保留空格和换行
*/
}
</script>
</body>