1.JS原生API插入节点的方式大致有innerHTML、outerHTML、appendChild、insertBefore、insertAdjacentHTML、applyElement这6种。
2.这里总结一下各自的用法，并封装包含before、prepend、append、after、applyElement的一系列函数。
1. 六种方式的用法
innerHTML：获取标签内部的HTML内容。
outerHTML：获取包括目标标签在内，以及内部HTML的内容。
appendChild：向目标标签末尾添加子节点，返回参数节点。
insertBefore：向目标节点的第二个参数位置添加第一个参数为子节点，返回第一个参数。
insertAdjacentHTML：向目标节点的指定位置添加节点；第二个参数为要添加的节点，第一个参数指定位置，位置包括beforebegin(添加为previousSibling)、afterbegin(添加为firstChild)、beforeend(添加为lastChild)、afterend(添加为nextSibling)。它还有两个兄弟函数，分别是insertAdjacentElement和insertAdjacentText，前者添加元素并返回该元素，后者添加文本。
applyElement：IE的函数，将参数节点设置成目标节点的外包围或者内包围；第一个为参数节点，第二个参数指定方式，方式包括inside(内包围，即参数节点将目标节点的子节点包起来)、outside(外包围，即参数节点将目标节点包起来)。
上面6种方式除了前两个是属性外，另外4个都是函数。innerHTML与outerHTML没有什么好说的，直接用HTML字符串赋值就能达到插入的目的了；appendChild简单套一层函数外壳就能封装成append函数；insertBefore让节点的插入方式非常灵活；insertAdjacentHTML可以实现字符串的插入方式；applyElement函数兼容一下即可成为JQuery的Wrap系列函数。
二、实现before、prepend、append、after函数
before把参数节点插入到目标节点前面，只需获取目标节点的父节点，然后父节点调用insertBefore即可。
prepend把参数节点插入到目标节点第一个子节点的位置，获取目标节点的第一个子节点，然后调用insertBefore即可。
append的功能和原生API里appendChild的功能一样。
after把参数节点插入到目标节点的后面，只需获取目标节点的nextSibling，然后调用insertBefore即可。
具体实现如下：
var append = function(node, scope) {
if(node.nodeType === 1 || node.nodeType === 9 || node.nodeType === 11) {
scope.appendChild(node);
}
};
var prepend = function(node, scope) {
if(node.nodeType === 1 || node.nodeType === 9 || node.nodeType === 11) {
scope.insertBefore(node, scope.firstChild);
}
};
var before = function(node, scope) {
if(node.nodeType === 1 || node.nodeType === 9 || node.nodeType === 11) {
scope.parentNode.insertBefore(node, scope);
}
};
var after = function(node, scope) {
if(node.nodeType === 1 || node.nodeType === 9 || node.nodeType === 11) {
scope.parentNode.insertBefore(node, scope.nextSibling);
}
};
上面函数只能插入元素节点、文档节点以及文档碎片，都是节点类型。如果我们想要支持字符串形式的插入方式，则需要封装insertAdjacentHTML了。
这里利用策略模式，将我要实现的四个函数做成策略对象，然后动态生成，以达到精简代码的效果：
//E5才有的迭代, 所以迭代要预先兼容
Array.prototype.forEach = [].forEach || function(callback) {
for(var i = 0, len = this.length; i < len; i++) {
callback.call(this[i], this[i], i, this);
}
};
/**插入策略集合**/
var insertStrategies = {
before : function(node, scope) {
scope.parentNode.insertBefore(node, scope);
},
prepend : function(node, scope) {
scope.insertBefore(node, scope.firstChild);
},
append : function(node, scope) {
scope.appendChild(node);
},
after : function(node, scope) {
scope.parentNode.insertBefore(node, scope.nextSibling);
},
/*支持字符串格式的插入, 注意：要兼容不可直接做div子类的元素*/
/*insertAdjace还有Element和Text，前者只能插元素，后者只能插文本*/
beforestr : function(node, scope) {
scope.insertAdjacentHTML('beforeBegin', node);
},
prependstr : function(node, scope) {
scope.insertAdjacentHTML('afterBegin', node);
},
appendstr : function(node, scope) {
scope.insertAdjacentHTML('beforeEnd', node);
},
afterstr : function(node, scope) {
scope.insertAdjacentHTML('afterEnd', node);
}
};
//响应函数
var returnMethod = function(method, node, scope) {
//如果是字符串
if(typeof node === 'string') {
return insertStrategies[method + 'str'](node, scope);
}
//1(元素)、9(文档)、11(文档碎片)
if(node.nodeType === 1 || node.nodeType === 9 || node.nodeType === 11) {
return insertStrategies[method](node, scope);
}
//此处还可添加节点集合的处理逻辑，用于处理选择其引擎获取的节点集合。
};
['before', 'prepend', 'append', 'after'].forEach(function(method){
window[method] = function(node, scope) {
returnMethod(method, node, scope);
};
});