[노트] - 제1 5 장 스 크 립 트 화 문서 - 15.6 생 성, 삽입, 삭제 노드

1. 노드 생 성:
(1). 원소 노드 만 들 기:

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

(2). 텍스트 노드 만 들 기:

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

(3). 복사 노드:

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

기타: createComment, createElementNS, createDocumentFragment 등.
2. 노드 삽입:
appendChild 는 부모 노드 의 마지막 에 새 노드 를 삽입 합 니 다.
insert Before 는 부모 노드 의 한 노드 전에 새 노드 를 삽입 합 니 다.
새 노드 가 이미 존재 하 는 하위 노드 라면 이 노드 를 삭제 하고 새로운 위치 에 삽입 합 니 다.
3. 노드 삭제 및 교체:
removeChild: 부모 노드 에서 노드 를 삭제 합 니 다.
replace Child: 삭제 후 이 위치 에 새 노드 를 추가 합 니 다.
4. DocumentFragment 사용 하기:
임시 용 기 를 만 듭 니 다. 문서 에 문서 세 션 을 추가 하면 세 션 의 노드 를 요소 에 삽입 합 니 다. 세 션 노드 를 포함 하지 않 습 니 다.
아 날로 그 insert AdjacentHTML 을 호 환 하 는 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;
})();