javascript DOM操作中的insertAdjacentHTML方法 – WEB前端开发

插入HTML内容与文本内容以前用的是innerHTML与innerText方法，今天微博上看到《JavaScript insertAdjacentHTML and beforeend》这篇文章，重新勾起对insertAdjacentHTML和 insertAdjacentText方法回忆，以前网上有个比较靠谱的兼容方法：

/**
 * @param {HTMLElement} el
 * @param {String} where beforeBegin、afterBegin、beforeEnd、afterEnd
 * @param {String} html
 */
function insertHTML(el, where, html) {
	if (!el) {
		return false;
	}
	
	where = where.toLowerCase();
	
	if (el.insertAdjacentHTML) {//IE
		el.insertAdjacentHTML(where, html);
	} else {
		var range = el.ownerDocument.createRange(),
			frag = null;
		
		switch (where) {
			case "beforebegin":
				range.setStartBefore(el);
				frag = range.createContextualFragment(html);
				el.parentNode.insertBefore(frag, el);
				return el.previousSibling;
			case "afterbegin":
				if (el.firstChild) {
					range.setStartBefore(el.firstChild);
					frag = range.createContextualFragment(html);
					el.insertBefore(frag, el.firstChild);
				} else {
					el.innerHTML = html;
				}
				return el.firstChild;
			case "beforeend":
				if (el.lastChild) {
					range.setStartAfter(el.lastChild);
					frag = range.createContextualFragment(html);
					el.appendChild(frag);
				} else {
					el.innerHTML = html;
				}
				return el.lastChild;
			case "afterend":
				range.setStartAfter(el);
				frag = range.createContextualFragment(html);
				el.parentNode.insertBefore(frag, el.nextSibling);
				return el.nextSibling;
		}
	}
}

在还没开始用jQuery之前，一直用这个方法。当然后来用了jQuery的.append()，.appendTo()，.html()，.prepend()，.prependTo()，.text()，.after()，.before()，.insertAfter()，.insertBefore()也很方便。

insertAdjacentHTML和 insertAdjacentText这两个方法很灵活，可以在指定的地方插入html内容和文本内容，在大部分情况下比element.innerHTML的性能更好，比Document Fragments更好的HTML文档插入方案，因为我们知道Document Fragments在某些IE版本中的表现不好。
insertAdjacentText方法与 insertAdjacentHTML方法类似，只不过只能插入纯文本，参数相同。

MDN上查了一下兼容性：http://www.css88.com/archives/https://developer.mozilla.org/en-US/docs/Web/API/element.insertAdjacentHTML

接口也很简单：

element.insertAdjacentHTML(position, text);

需要传入字符串参数position，以及字符串参数html代码。我们可以对照jQuery的HTML插入方法。
参数position 的取值：

• beforeBegin：在该元素前插入
• afterBegin：在该元素第一个子元素前插入
• beforeEnd：在该元素最后一个子元素后面插入
• afterEnd：在该元素后插入

方法同意支持空元素，和innerHTML与innerText方法没什么区别了。

性能测试可以看这里：http://jsperf.com/innerhtml-vs-insertadjacenthtml-vs-dom/8