DOM扩展--插入标记、插入文本

插入标记

虽然DOM为操作节点提供了细致入微的控制手段，但在需要给文档插入大量新HTML标记的情况下，通过DOM操作仍然很麻烦，因为不仅要创建一系列DOM节点，而且还要小心地按照正确的顺序把它们连接起来。相对而言，使用插入标记的技术，直接插入HTML字符串不仅更简单，速度也更快。与插入标记相关的DOM扩展已经纳入了HTML5规范。
1.innerHTML属性
在读模式下，innerHTML属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的HTML标记。在写模式下，innerHTML会根据指定的值创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。
读模式
语法格式：元素名.innerHTML

<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值完全相同。

读模式
语法格式：元素名.innerHTML = 值（文本或标签）
在写模式下，innerHTML的值会被解析为DOM树，替换调用元素原来的所有子节点。因为它的值被认为是HTML，所以其中的所有标签都会按照浏览器处理HTML的标准方式转换为元素（同样，这里的转换结果也因浏览器而异）。如果设置的值仅是文本而没有HTML标签，那么结果就是设置纯文本。
div.innerHTML = "Hello world!";
为innerHTMl设置的包含HTML的字符串值与解析后innerHTML的值大不相同。
div.innerHTML = "Hello & welcome, <b>\"reader\"!</b>";
以上操作得到的结果如下：
<div id="content">Hello &amp; welcome, <b>&quot;reader&quot;!</b></div>
设置了innerHTML之后，可以像访问文档中的其他