before()、after()等新增DOM API

before()是个ChildNode方法，也就是节点方法。节点方法对应于元素方法。区别在于，节点可以直接是文本节点，甚至注释等。但是，元素必须要有HTML标签。

语法如下：

void ChildNode.before((节点或字符串)... 其它更多节点);

先来看一个最简单例子，已知HTML如下：

<img id="img" src="mm0.jpg">

如果我们希望在图片<img>前面插入写文字，直接可以：

document.getElementById('img').before('哈哈哈：');

效果会是这样：

哈哈哈：

如果我们插入的是一段HTML字符串，那效果又是怎样的呢？如下：

document.getElementById('img').before('<h1>哈哈哈：</h1>');

结果：HTML被转义成安全字符

<h1>哈哈哈:</h1>

可以看出原生DOM的before() API和jQuery中的before() API还是有差别的，在jQuery中，before()的参数值是作为html字符处理的，但是这里的before()是作为text字符处理的。

如果在图片前面添加HTML字符内容，用兼容更好的insertAdjacentHTML() DOM方法，如下：

document.getElementById('img').insertAdjacentHTML('beforebegin', '<strong>哈哈哈：</strong>');

语法如下：

element.insertAdjacentHTML(position, html);

元素DOM的before() API还有一个很棒的特性，那就是可以同时插入多个节点内容，例如：

document.getElementById('img').before('1. 哈哈哈', ' ', '2. 哈哈哈');

1.哈哈哈 2.哈哈哈

2. DOM API之after()

after()和before()的语法特性兼容性都是一一对应的，差别就在于语义上，一个是在前面插入，一个是在后面插入。