innerText textContent innerHTML

_聪明勇敢有力气

于 2022-10-08 21:23:26 发布

阅读量357

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_65402230/article/details/127216209

版权

js 专栏收录该内容

73 篇文章 0 订阅

订阅专栏

innerHTML

Element.innertHTML
设置和获取元素的HTML
innerHTML 元素内部的所有内容都会被删除
outerHTML 替换包含父元素的所有内容

获取源码

<!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>Document</title>
  </head>
  <body>
    <div id="wrapper"></div>
    <script>
      var oWrapper = document.getElementById('wrapper');
      var code = document.documentElement.innerHTML.replace(/</g, '&lt;');
      document.documentElement.innerHTML = '<pre>' + code + '<pre>';
      console.log(code);
    </script>
  </body>
</html>

在这里插入图片描述设置innerHTML发生了什么?

innerHTML = ‘
123
’
123
解析为HTML文档结构
用DocumentFlagment将之歌HTML文档结构变成DOM节点
源本父节点上的所有内容都会替换成这个DOM节点

安全问题
新的浏览器和HTML5都会阻止这种通过innerHTML嵌入script脚本的程序执行
a = ‘’
纯文本的时候不要使用innerHTML
推荐使用textContent
dom节点的引用会在追加html字符串之后被破坏

var oText = document.getElementById('text);
oWrapper.innerHTML += '<h1>123</h1>'
oText.style.color = 'red'

会报错

textContent

在Node.prototype上
它只会将文本插入到元素内部去
不会成为一个dom的元素节点只会成为文本节点

innerText

在HTMLElement.prototype上
给元素渲染文本节点

      oWrapper.innerText = '<h1>123</h1>';
      oWrapper.textContent = '<h1>123</h1>';

在这里插入图片描述

textContent与innerText区别

textContent获取所有元素的内容 script style
innerText只会获取给人看的所有内容
innerText会受到css的影响 reflow

<!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>Document</title>
  </head>
  <body>
    <div id="wrapper">
      <h1>这是标题</h1>
      <p class="content">
        <style>
          .content {
            color: orange;
          }
        </style>
      </p>
      这是文章内容
      <br />
      这是文章内容
      <br />
      这是文章内容
      <br />
      这是文章内容
      <span style="display: none">这是隐藏内容</span>
    </div>
    <textarea id="oInnerText"></textarea>
    <textarea id="oTextContent"></textarea>
    <script>
      var oWrapper = document.getElementById('wrapper');
      var oInnerText = document.getElementById('oInnerText');
      var oTextContent = document.getElementById('oTextContent');
      oInnerText.innerHTML = oWrapper.innerText;
      oTextContent.innerHTML = oWrapper.textContent;
    </script>
  </body>
</html>