js dom追加html,纯JS为DOM添加html字符串：appendHTML方法和prependHTML方法

/**

*

纯JS为DOM添加html字符串：appendHTML方法和prependHTML方法

* * http://www.myexception.cn/HTML-CSS/1876216.html

*

* http://www.zhangxinxu.com/wordpress/2013/05/js-dom-basic-useful-method/

* @param {Object} html

*/

HTMLElement.prototype.beforeHTML = function(html) {

// If elements have a native insertAdjacentHTML, use it in four HTML

// insertion functions with more sensible names.

if(document.createElement("div").insertAdjacentHTML) {

this.insertAdjacentHTML("beforebegin", html);

return this;

}

var fragment = fragment(html);

this.parentNode.insertBefore(fragment, this);

// 据说下面这样子世界会更清净

fragment = null;

};

HTMLElement.prototype.appendHTML = function(html) {

// If elements have a native insertAdjacentHTML, use it in four HTML

// insertion functions with more sensible names.

if(document.createElement("div").insertAdjacentHTML) {

this.insertAdjacentHTML("beforeend", html);

return this;

}

var fragment = fragment(html);

this.appendChild(fragment);

// 据说下面这样子世界会更清净

fragment = null;

};

HTMLElement.prototype.prependHTML = function(html) {

// If elements have a native insertAdjacentHTML, use it in four HTML

// insertion functions with more sensible names.

if(document.createElement("div").insertAdjacentHTML) {

this.insertAdjacentHTML("afterbegin", html);

return this;

}

var fragment = fragment(html);

// 插入到容器的前面 - 差异所在

this.insertBefore(fragment, this.firstChild);

// 内存回收？

fragment = null;

};

HTMLElement.prototype.afterHTML = function(html) {

// If elements have a native insertAdjacentHTML, use it in four HTML

// insertion functions with more sensible names.

if(document.createElement("div").insertAdjacentHTML) {

this.insertAdjacentHTML("afterend", html);

return this;

}

var fragment = fragment(html);

this.parentNode.insertBefore(fragment, this.nextSibling);

// 据说下面这样子世界会更清净

fragment = null;

};

function fragment(html) {

var nodes, divTemp = document.createElement("div"),

fragment = document.createDocumentFragment();

divTemp.innerHTML = html;

// 此时div.childNodes就是我们需要的节点了

nodes = divTemp.childNodes;

for(var i = 0, length = nodes.length; i < length; i += 1) {

// 容器fragment加载克隆的节点 - 克隆的作用是保证nodes的完整

fragment.appendChild(nodes[i].cloneNode(true));

}

// 据说下面这样子世界会更清净

nodes = null;

divTemp = null;

return fragment;

}