innerText和innerHTML

最新推荐文章于 2023-09-15 14:00:00 发布

原创最新推荐文章于 2023-09-15 14:00:00 发布 · 260 阅读

CC 4.0 BY-SA版权

文章标签：

本文深入探讨了DOM元素的innerText与innerHTML属性的区别与应用。innerText返回元素内纯文本内容，而innerHTML则返回完整的HTML结构。通过实例展示了两者的读取与写入操作，为前端开发者提供了实用的代码片段。

几乎所有DOM元素都有innerText,innertHTML属性(注意大小写),分别是元素标签内的文本表示形式和HTML源代码，这两个属性是可读可写的。

<body>
<div id="one">
    <p>这是一段文字</p>
    <p>这是一段文字</p>
    <p>这是一段文字</p>
    <p>这是一段文字</p>
    <p>这是一段文字</p>
</div>
</body>

  var one=document.getElementById("one");
  console.log(one.innerText);

在这里插入图片描述
运行代码可以看出innnerText打印的是文本的内容信息。

  console.log(one.innerHTML);

在这里插入图片描述
可以看出innnerHTML打印的是页面元素之中的所有内容，包括HTML标签。

<div id="one">
</div>
<script>
    var one=document.getElementById("one");
</script>

innerText

 one.innerText="<ul><li>123</li><li>234</li><li>345</li></ul>";

在这里插入图片描述

innerHTML

 one.innerHTML="<ul><li>123</li><li>234</li><li>345</li></ul>";

在这里插入图片描述
可以看到一个是原样输出，一个是转换成html语言输出。

总结：

innerText：innerText是一个可写属性，返回元素内包含的文本内容，在多层次的时候会按照元素由浅到深的顺序拼接其内容，也就是说获取到的是不带标签的文本的拼接组合。
innerHTML：innerHTML属性作用和innerText类似，但不是返回元素的文本内容，而是返回元素的HTML结构，在写入的时候也会自动构建DOM，获取到的是带标签的文本，当然也能获取所有的子标签。