15 DOM 扩展

3.6 插入标记

DOM 虽然已经为操纵节点提供了很多 API，但向文档中一次性插入大量 HTML 时还是比较麻烦。相比先创建一堆节点，再把它们以正确的顺序连接起来，直接插入一个 HTML 字符串要简单（快速）得多。HTML5 已经通过以下 DOM 扩展将这种能力标准化了。

3.6.1 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> 

实际返回的文本内容会因浏览器而不同。IE 和 Opera 会把所有元素标签转换为大写，而 Safari、Chrome 和 Firefox 则会按照文档源代码的格式返回，包含空格和缩进。因此不要指望不同浏览器的 innerHTML 会返回完全一样的值。

在写入模式下，赋给 innerHTML 属性的值会被解析为 DOM 子树，并替代元素之前的所有节点。因为所赋的值默认为 HTML，所以其中的所有标签都会以浏览器处理 HTML 的方式转换为元素（同样，转换结果也会因浏览器不同而不同）。如果赋值中不包含任何 HTML 标签，则直接生成一个文本节点，如下所示：

div.innerHTML = "Hello world!"; 

因为浏览器会解析设置的值，所以给 innerHTML 设置包含 HTML 的字符串时，结果会大不一样。来看下面的例子：

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

这个操作的结果相当于：

<div id="content">Hello &amp; welcome, <b>&quot;reader&quot;!</b></div> 

设置完 innerHTML，马上就可以像访问其他节点一样访问这些新节点。

注意 设置 innerHTML 会导致浏览器将 HTML 字符串解析为相应的 DOM 树。这意味着设置 innerHTML 属性后马上再读出来会得到不同的字符串。这是因为返回的字符串是将原始字符串对应的 DOM 子树序列化之后的结果。