首页 » DOM » innerHTML属性

innerHTML属性

在读取信息时,innerHTML返回当前元素所有子节点的HTMl表现,包括元素、注释及文本节点。在写入信息时,innerHTML会按照指定的值创建新的DOM子树,并以子树替换当前元素的所有子节点。以下面的HTML代码为例:

<div id="content">
  <p>This is a <strong>paragraph</strong> with a list following it.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

这里面<div>元素的innerHTML属性将返回下列字符串:

<p>This is a  <strong>paragraph</strong> with a list following it.</p>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

在不同的浏览器中,innerHTML返回的文本肯能会有所不同。IE和Opera常常把所有标签转换成大写,而Safrai、Chrome和Firefox则以文档中指定的形式返回HTML——包括空格和缩进。

在写入信息时,innerHTML会将给定的字符串解析为DOM子树,并用这个子树替换所有的子节点。由于赋给innerHTML的字符串会被当作HTML,因此其中包含的所有标签都会按照浏览器处理HTML的标准方式,被转换成对应的元素。如果像下面这样,只设置简单的文本,那么结果就如如同设置innerText一样:

div.innerHTML = "Hello world";

如果为innerText设置的字符串中包含HTML代码,结果可能就会大不一样了。区别就在于innerText会转义HTML语法字符,而innerTHML会解析它们。

div.innerHTML = "hello & welcome, <b>\"reader\"!</b>";

执行这行代码之后的结果是:

<div id="content">hello &amp; welcome, <b>"reader"!</b></div>
此文章发表在 DOM. 将 固定链接 加入收藏.