Element.prototype.innerHTML

Element.prototype.innerHTML 设置和获取元素的 HTML

基本作用

获取 HTML

获取元素的 HTML 时， 对于某些字符是获取其字符实体

如果使用 textContent 就会获取 原字符

设置 HTML

var oWrapper = document.getElementById('wrapper');
oWrapper.innerHTML = '<h1>123</h1>'

• 父节点 HTML 不要写错
• innerHTML HTML 字符串不要写错
• document.innerHTML 没有作用，某些浏览器会报警不允许修改 document
  • document.body.innerHTML / document.documentElement.innerHTML 在 body 中写 HTML
• innerHTML 元素内部的所有内容都会被删除

• outerHTML 替换包含父元素的所有内容

  在网页显示 HTML 原码的方法

  var code = document.documentElement.innerHTML.replace(/</g, '&lt;'); // 使浏览器不会解析为 HTML
  document.documentElemnet.innerHTML = "<pre>" + code + "</code>"; // pre 标签会把字符实体显示为对应的字符

  设置 innerHTML 到底发生了什么

  当设置 innerHTML = '<h1>123</h1>';

• 会把 <h1>123</h1> 解析为 HTML 文档

• 用 DocumentFragment 这个 HTML 文档结构变成 DOM 节点

• 原本父节点上的所有内容都会被替换成这个 DOM 节点

  安全问题

  script 脚本

  HTML5 和现代的新的浏览器都会阻止这种通过 innerHTML 嵌入 script 脚本的程序执行

  var a = '123';
  oWrapper.innerHTML = a;
  a = '<script>alert("123")</script>';
  oWrapper.innerHTML = a;
  a = '<img src="" onerror="alert(123)"/>';
  oWrapper.innerHTML = a;

  插入纯文本的时候，就不要使用 innerHTML
  Node.textContent 它只会将文本插入的元素内部去

  Node.textContent

  console.log(oWrapper.textContent);
  oWrapper.text = '10';
  oWrapper.text = '<h1>123</h1>'; // 不解析为 HTML 文档

  使用 innerHTML 会破坏原来 Element 的引用

  var oText = document.getElementById('text');
  owrapper.innerHTML += '<h1>title</h1>';
  oText.style.color = 'red'; // 没有效果

  HTMLElement.prototype.innerText

  服务于 HTML，给元素渲染文本节点

  owrapper.innerText = '234';
  owrapper.innerText = '<h1>title</h1>'; // 会转为文本

  innerText 与 contentText 的区别

  contentText 获取所有元素的内容

• script、style 都转为文字

innerText 只会获取给人看的内容

• 会受到 CSS 的影响，会引起 reflow

左边为 innertText，右边为 contentText