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 참고.

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

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
append
Experimental
Chrome Full support 54Edge Full support 17Firefox Full support 49IE No support NoOpera Full support 39Safari Full support 10WebView Android Full support 54Chrome Android Full support 54Firefox Android Full support 49Opera Android Full support 41Safari iOS Full support 10Samsung Internet Android Full support 6.0

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

참고