在需要给文档插入大量的html 标记下，通过DOM操作很麻烦，你不仅要创建一系列的节点，而且还要小心地按照顺序把它们接结起来。
利用html 标签 插入技术，可以直接插入html代码字符串，简单、高效！
以下插入html标签相关的扩展已经纳入html5 规范.
innerHTML 属性 有两种模式，写模式与读模式。
在读模式下，返回的是html 代码字符串。
例如：
<div id="outer">
<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><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属性的值 会被解析为DOM子树，替换调用元素的所有子节点。
如果是不包含html元素标签的纯文档，那么结果就是设置纯文本,例如:
div.innerHTML = "hello";
div.innerHTML = "Hello & welcome, <b>\"reader\"!</b>";
以上写模式操作的结果如下:
<div id="content">Hello & welcome, <b>"reader"!</b></div>
设置了innerHTML 之后，可以像访问文档中的其他节点一样访问新创建的节点。
为innerHTML 设置HTML 字符串后，浏览器会将这个字符串解析为相应的DOM树。因此设置了innerHTML 之后，再从中读取HTML 字符串，会得到与设置时不一
样的结果。原因在于返回的字符串是根据原始HTML 字符串创建的DOM树经过序列化之后的结果。
使用innerHTML属性也有一些限制:
插入<script> 标签，IE8及以前的版本，是唯一能运行里面脚本的浏览器，且必须满足一定条件！
大多数浏览器都支持以直观的方式通过innerHTML 插入<style>元素。
div.innerHTML = "<style type=\"text/css\">body {background-color: red; }</style>";div.innerHTML = "_<style type=\"text/css\">body {background-color: red; }</style>"; //<script>,<style> 在IE中属于 "无作用域"的元素，也就是不显示的元素。
div.removeChild(div.firstChild);不支持innerHTML的元素有: <col>,<colgroup>,<frameset>,<head>,<html>,<style>,<table>,<tbody>,<thead>,<tfoot>,<tr>
此外，IE8以及更早IE版本，<title> 也没有innerHTML属性。
outerHTML 与 innerHTML 的不同点: 在读模式下，outerHTML 返回调用它的元素及所有子节点的HTML 标签。在写模式下，outerHTML
会根据指定的HTML 字符串创建新的DOM 子树，然后用这个DOM子树完全替换调用元素。（而不仅仅是调用元素的DOM子树）
全栈JavaScript之路（十九）HTML5 插入 html标记 （ 一 ）innerHTML 与outerHTML,布布扣,bubuko.com
全栈JavaScript之路（十九）HTML5 插入 html标记 （ 一 ）innerHTML 与outerHTML
原文地址：http://blog.csdn.net/liveinjs/article/details/37598501
