Element.innerHTML 属性设置或获取描述元素后代的HTML语句。

Note: 如果一个 <div>, <span>, 或 <noembed> 节点具有一个文本子节点,包含字符 (&), (<),  或(>)innerHTML 将这些字符分别返回为&amp;, &lt; 和 &gt; 。使用Node.textContent  获取一个这些文本节点内容的正确副本。

语法

const content = element.innerHTML;
// 返回时,内容包含描述所有元素后代的序列化HTML代码。


element.innerHTML = markup;
// 除所有元素的子节点,解析内容字符串,并将生成的节点分配给元素的子元素。

示例

<html>
  <head></head>
  <body>
    <div id="txt">
      <script     id="txt0"> x=0> </script>
        <noembed    id="txt1"> 1   </noembed>
        <noframes   id="txt2"> 2   </noframes>
        <noscript   id="txt3"> 3   </noscript>
        <div        id="txt4"> 4   </div>
        <div>
          <noscript id="txt5"> 5   </noscript>
        </div>
        <span       id="txt6"> 6   </span>
      </div>

      <div id="innerHTMLtxt"></div>
    <div id="textContenttxt"><div>

    <script> 
    for (let i = 0; i < 7; i++) { 
      x = "txt" + i;
      document.getElementById(x).firstChild.nodeValue = '&<>'
    }

    document.getElementById("innerHTMLtxt").textContent =
        document.getElementById("txt").innerHTML
    document.getElementById("textContenttxt").textContent =
        document.getElementById("txt").textContent
    </script>
  <body>
</html>
// HTML:
// <div id="d"><p>Content</p>
// <p>Further Elaborated</p>
// </div>

const d = document.getElementById("d");
dump(d.innerHTML);

// the string "<p>Content</p><p>Further Elaborated</p>" 
// is dumped to the console window

注意

尽管innerHtml属性不属于W3C DOM规范,但是它为完全替换元素内容提供了一个更加便捷的方式。举个例子,可以通过如下代码完全删除文档内body的内容:

document.body.innerHTML = "";  // Replaces body content with an empty string.

包括BODY和HTML在内的许多类型元素的innerHTML属性可以被获取或者替换。当一个页面内容被动态修改之后,可以使用它来观察源代码。

// Copy and paste into address bar as a single line
javascript:x=document.body.innerHTML.replace(/</g,'&lt;').replace(/\n/g,'<br>'); document.body.innerHTML = x;

因为这个属性没有统一的标准,各浏览器厂商对它实现差别很大。比如,当在文本框中输入文本时,
IE会改变文本框的innerHTML的值,但是Gecko内核的浏览器则不会。

不应该使用它来写入一个表格的内容,应该使用W3C DOM标准方法来作这件事-尽管它可以用来写入整个表格或写入一个单元格的内容。

规范

Specification Status Comment
DOM Parsing and Serialization
Element.innerHTML
Working Draft Initial definition

参考

MSDN innerHTML

其它

  • innerDOM - For those wishing to adhere to standards, here is one set of JavaScript functions offering to serialize or parse XML so as to set element contents defined as string(s) via the DOM or getting element contents obtained from the DOM as a string.
  • Element.insertAdjacentHTML - An alternative for innerHTML, allowing you to append the new HTML, instead of replacing it.
  • jssaxparser - A more robust (though heavier) solution than innerDOM (supports parsing with namespaces, single-quoted attributes, CDATA sections, etc.) is this SAX2 parser when used with its DOM content handler. (Offers String to DOM; DOM to String is significantly easier)
  • Efficiency considerations: On quirksmode
  • MSDN: innerHTML Property

文档标签和贡献者

 最后编辑者: xgqfrms-GitHub,