DOM 변경

동적으로 DOM 트리에 새로운 요소 삽입하기

- el.innerHTML로 HTML 생성

/**
 * Insert elements into DOM #2
 */
var target = document.getElementById( "target" );
target.innerHTML = "<div></div>";

- 노드 생성후 추가

var target = document.getElementById("target"),
     div = document.createElement("div");
target.appendChild(div);

문제점

el.innerHTML을 변경하거나 요소에 자식을 추가할 때마다 DOM 리플로가 발생한다. 리플로가 반복적으로 발생하면 애플리케이션이 느려진다. 이는 자원을 많이 소모하는 작업이다.

최적화

유사한 요소를 배치(batch)로 만들면, 처리는 더 최적화될 수 있다. 루프에서 모든 요소를 생성하는 대신 원본에서 복제(el.cloneNode)하면 더 빨라지게 할 수 있다.

/**
 * Speeding up by cloning
 */
var target = document.getElementById( "target" ),
    /**
     * Create a complex element
     * @returns {Node}
     */
    createNewElement = function(){
      var div = document.createElement( "div" ),
          span = document.createElement( "span" );
      span.appendChild( document.createTextNode( "Bar" ) );
      div.appendChild( span );
      return div;
    },
    el;

el = createNewElement();
// loop begins
target.appendChild( el.cloneNode( true ) );
// loop ends

특정 위치에 요소 삽입하기

parent.insertBefore(el, parent.firstChild);

DOM에서 특정 요소 제거하기

el.parentNode.removeChild(el);

요소를 리로드하기

모든 리스너에 대한 구독을 재설정하려면 다음과 같이 한다.

/**
 * Reload an element
 */
function reload( el ) {
    var elClone = el.cloneNode( true );
    el.parentNode && el.parentNode.replaceChild( elClone, el );
 }