ParentNode.append()

ParentNode.append() 메서드는 ParentNode의 마지막 자식 뒤에 Node 객체 또는 DOMString 객체를 삽입한다. DOMString 객체는 Text 노드처럼 삽입한다.

Node.appendChild()와 다른 점:

• ParentNode.append()는 DOMString 객체도 추가할 수 있다. 한편 Node.appendChild()는 오직 Node 객체만 허용한다.
• ParentNode.append()는 반환하는 값이 없다. 한편 Node.appendChild()는 추가한 Node 객체를 반환한다.
• ParentNode.append()는 여러 개 노드와 문자를 추가할 수 있다. 한편 Node.appendChild()는 오직 노드 하나만 추가할 수 있다.

문법

[Throws, Unscopable]
void ParentNode.append((Node or DOMString)... nodes);

매개 변수

nodes

삽입하려고 하는 Node 객체 집합 또는 DOMString 객체 집합.

예외

• 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]);

명세

브라우저 호환성

참고

• ParentNode and ChildNode
• ParentNode.prepend()
• Node.appendChild()
• ChildNode.after()
• NodeList