ParentNode.append()
ParentNode.append()
메서드는 ParentNode
의 마지막 자식 뒤에 Node
객체 또는 DOMString
객체를 삽입한다. DOMString
객체는 Text
노드처럼 삽입한다.
Node.appendChild()
와 다른 점:
문법
[Throws, Unscopable] void ParentNode.append((Node or DOMString)... nodes);
매개 변수
예외
HierarchyRequestError
: 계층 구조의 지정된 지점에 노드를 삽입 할 수 없다.
예제
요소(element) 추가하기
var parent = document.createElement("div");
var p = document.createElement("p");
parent.append(p);
console.log(parent.childNodes); // NodeList [ <p> ]
문자(text) 추가하기
var parent = document.createElement("div");
parent.append("Some text");
console.log(parent.textContent); // "Some text"
요소(element)와 문자(text) 함께 추가하기
var parent = document.createElement("div");
var p = document.createElement("p");
parent.append("Some text", p);
console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]
ParentNode.append()
범위 지정 불가
append()
메소드는 with
문으로 범위를 지정하지 않는다. 더 자세한 내용은 Symbol.unscopables
참고.
var parent = document.createElement("div");
with(parent) {
append("foo");
}
// ReferenceError: append is not defined
대체 구현
다음 코드를 이용하면 인터넷 익스플로러 9 이상에서 append() method
를 대체하여 구현할 수 있다.
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
(function (arr) {
arr.forEach(function (item) {
if (item.hasOwnProperty('append')) {
return;
}
Object.defineProperty(item, 'append', {
configurable: true,
enumerable: true,
writable: true,
value: function append() {
var argArr = Array.prototype.slice.call(arguments),
docFrag = document.createDocumentFragment();
argArr.forEach(function (argItem) {
var isNode = argItem instanceof Node;
docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
});
this.appendChild(docFrag);
}
});
});
})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
명세
명세 | 상태 | 참고 |
---|---|---|
DOM The definition of 'ParentNode.append()' in that specification. |
Living Standard | 초기 정의 |