jQuery에서 DOM Element 추가하기

jQuery에서 DOM Element를 추가할수 있도록 메소드를 지원하고 있습니다.

.append, .appendTo, .insertAfter, .after, insertBefore, .before, .prepend, .prependTo

이 메소드를 사용해서 엘리먼트를 DOM에 추가할때 잊기 쉬운 성능상의 주의점이 있습니다.

DOM 에 반복적으로 ELEMENT를 추가해야 하는 경우에 매번 메소드를 호출하면 엄청한 성능상의 댓가를 지불해야 합니다.

그래서 같은 컨테이너에 추가해 할 경우에는 한 문장으로 만들어서 한번만 메소드를 호출하도록 알고리즘을 만들 필요가 있습니다.

아래는 배열을 사용하여 한 문장으로 만들어서 호출하는 예제입니다.

The syntax for adding new elements to the page is easy, so it's tempting to forget that there's a huge performance cost for adding to the DOM repeatedly. If you're adding many elements to the same container, you'll want to concatenate all the HTML into a single string, and then append that string to the container instead of appending the elements one at a time. Use an array to gather all the pieces together, then join them into a single string for appending:

var myItems = [];

var $myList = $( "#myList" );

for ( var i = 0; i < 100; i++ ) {

    myItems.push( "<li>item " + i + "</li>" );

}

$myList.append( myItems.join( "" ) );