在须要给文档插入大量的html 标记下。通过DOM操作非常麻烦，你不仅要创建一系列的节点，并且还要小心地依照顺序把它们接结起来。
利用html 标签 插入技术，能够直接插入html代码字符串，简单、高效！
下面插入html标签相关的扩展已经纳入html5 规范.
- 1.innerHTML 属性
- 2.outerHTML 属性
- 3.insertAdjacentHTML 方法
innerHTML 属性 有两种模式。写模式与读模式。
在读模式下，返回的是html 代码字符串。
比如：
This is a paragraph with a list following it.
Item 1
Item 2
Item 3
对于上面的 div 来说 读模式返回的是下面html代码字符串
This is a paragraph with a list following it.
Item 1
Item 2
Item 3
这里要注意。不同的浏览器返回文档格式不同! IE 与 Opear 返回的 html元素标签 都是大写的。而 火狐,chrome, safari,等 原原本本的返回。
不要指望全部的浏览器都返回同样的子符串！
在写模式下。innerHTML属性的值 会被解析为DOM子树，替换调用元素的全部子节点。
假设是不包括html元素标签的纯文档，那么结果就是设置纯文本,比如:
div.innerHTML = "hello";
假设 字符串包括 html标签，比如
div.innerHTML = "Hello & welcome, \"reader\"!";
以上写模式操作的结果例如以下:
Hello & welcome, "reader"!
设置了innerHTML 之后。能够像訪问文档中的其它节点一样訪问新创建的节点。
为innerHTML 设置HTML 字符串后，浏览器会将这个字符串解析为对应的DOM树。因此设置了innerHTML 之后，再从中读取HTML 字符串，会得到与设置时不一
样的结果。
原因在于返回的字符串是依据原始HTML 字符串创建的DOM树经过序列化之后的结果。
使用innerHTML属性也有一些限制:
插入
Original: https://www.cnblogs.com/gcczhongduan/p/6684410.html
Author: gcczhongduan
Title: 全栈JavaScript之路（十九）HTML5 插入 html标记 （ 一 ）innerHTML 与outerHTML
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/536471/
转载文章受原作者版权保护。转载请注明原作者出处！