innerHTML与innerText的区别

idiot_MAN

已于 2022-08-11 23:26:38 修改

阅读量5k

点赞数 4

分类专栏： javascript 前端文章标签：前端 html javascript

于 2022-08-11 22:45:30 首次发布

本文链接：https://blog.youkuaiyun.com/idiot_MAN/article/details/126294779

版权

前端同时被 2 个专栏收录

67 篇文章

订阅专栏

javascript

21 篇文章

订阅专栏

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>