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 객체 집합.

예외

예제

요소(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 (en-US) 참고.

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 초기 정의

브라우저 호환성

No compatibility data found for api.ParentNode.append.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.

참고