【メモ】「js権威ガイド」-第15章スクリプトドキュメント-15.6作成、挿入、削除ノード

1.作成ノード:
(1)要素ノードを作成します.

var p = document.createElement("p");

(2)Textノードを作成する:

var text = document.createTextNode("abc");

(3).コピーノード:

//    
var element2 = element.cloneNode(true);

その他:createComment、createElement、createDockmentなど.
2.ノードを挿入する:
apendChildは親ノードの最後に新しいノードを挿入する.
insertBeforeは、親ノードのあるノードの前に新しいノードを挿入する.
使用する新しいノードが既に存在するサブノードである場合、ノードは彼らを新たな位置に挿入する.
3.ノードの削除と置換:
removeChild:親ノードからノードを削除する.
replacceChild:削除後、この位置に新しいノードを追加する.
4.DcumentFragmentを使用する:
一時的なコンテナを作成します.ドキュメントにドキュメントのセグメントを追加すると、セグメントノードを含まずにセグメントのノードを要素に挿入します.
アナログinsertAdjacentHTML対応のInsertツール類:

var Insert = (function() {
	if (document.createElement("div").insertAdjacentHTML) {
		return {
			before : function(e, h) {
				e.insertAdjacentHTML("beforebegin", h);
			},
			after : function(e, h) {
				e.insertAdjacentHTML("afterend", h);
			},
			atStart : function(e, h) {
				e.insertAdjacentHTML("afterbegin", h);
			},
			atEnd : function(e, h) {
				e.insertAdjacentHTML("beforeend", h);
			}
		};
	}

	function fragment(html) {
		var elt = document.createElement("div");
		var frag = document.createDocumentFragment();
		elt.innerHTML = html;
		while (elt.firstChild)
		frag.appendChild(elt.firstChild);
		return frag;
	};

	var Insert = {
		before : function(e, h) {
			e.parentNode.insertBefore(fragment(html), e);
		},
		after : function(e, h) {
			e.parentNode.insertBefore(fragment(html), e.nextSibling);
		},
		atStart : function(e, h) {
			e.insertBefore(fragment(html), e.firstChild);
		},
		atEnd : function(e, h) {
			e.appendChild(fragment(html));
		}
	};

	Element.prototype.insertAdjacentHTML = function(pos, html) {
		switch(pos.toLowerCase()) {
			case "beforebegin":
				return Insert.before(this, html);
			case "afterend":
				return Insert.after(this, html);
			case "afterbegin":
				return Insert.atStart(this, html);
			case "beforeend":
				return Insert.atEnd(this, html);
		}
	};
	return Insert;
})();