15 DOM 扩展

<p>This is a <strong>paragraphstrong> with a list following it.p> 
<ul> 
 	<li>Item 1li> 
 	<li>Item 2li> 
 	<li>Item 3li> 
ul> 
1
2
3
4
5
6

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

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

div.innerHTML = "Hello world!"; 
1

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

div.innerHTML = "Hello & welcome, \"reader\"!"; 
1

这个操作的结果相当于：

<div id="content">Hello & welcome, <b>"reader"!b>div> 
1

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

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