innerHTML与innerText的区别

liukaili089

已于 2023-12-13 14:27:23 修改

阅读量2.2k

点赞数 9

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

于 2023-12-12 17:09:55 首次发布

本文链接：https://blog.csdn.net/qq_41012845/article/details/134953624

版权

前端开发专栏收录该内容

5 篇文章

订阅专栏

一、innerHTML与innerText介绍

innerHTML和innerText都是元素的属性，通过修改这个元素的属性可以达到修改元素内容的目的

二、innerHTML与innerText的区别

1.innerHTML

InnerHTML获取或设置指定元素标记内的HTML内容，从元素标记的开始到元素标记的结束（包括HTML标记）

示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>innerHTML</title>
</head>

<body>
  <div id="test">
    <!-- 注释：测试注释 -->
    hello <strong>world</strong>
  </div>

  <script>
     console.log(document.getElementById('test').innerHTML)
    // 打印返回值：

    //    <!-- 注释：测试注释 -->
    //    hello <strong>world</strong>


    // 所以：innerHTML表示元素所有的后代html。
    // 该范围包括文本节点，注释节点，元素节点等内容。
    // 在读写该属性时，我们可以获取一个字符串，这个字符串包括元素内部的内容，
    // 包含空格，换行，注释。
  </script>
</body>

</html>

2.innerText

InnerText获取或设置指定元素标记内的文本的值，从元素标记的开始到元素标记的结束（不包括HTML标记）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>innerText</title>
</head>

<body>
  <div id="test">
    <!-- 注释：测试注释 -->
    hello <strong>world</strong>
  </div>
  <script>
    console.log(document.getElementById('test').innerText)
    // 打印返回值：hello wordl


    //所以：
    // innerText表示元素所有的文本内容，包括文本节点，子元素和后代元素的文本节点
    // 只包括内容，不包括注释空格等
  </script>
</body>

</html>

三、思考：childNodes和children

childNodes	Node.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。 childNodes 属性返回的是 DOM 节点的子集合，它属于 NodeList 集合 childNodes会返回所有节点，包括HTML、Text、注释等等内容
children	Element.children 是一个只读属性，返回一个Node的子elements childre属于HTMLCollection集合，它返回的是节点的子elements 通俗的说，children返回的是HTML元素标签总结：children只返回元素节点