jQuery로 HTML 요소 생성

Question

동적으로 html을 생성하려면 (템플릿 라이브러리를 사용하지 않고) 두 가지 옵션이 있습니다. 다음 중 호감을 보인 이유는 무엇입니까?

var cars = [{"id": 1, "name": "volvo"}, 
      {"id": 2, "name": "nissan"}, 
      {"id": 3, "name": "audi"}]; 
for (i = 0; i < cars.length; i++){ 

    //Option one 
    var html = "<li data-id="+cars[i].id+"><a>"+cars[i].name+"</a></li>"; 
    $('#result-one').append(html); 

    //Option two  
    var $el = $('<li/>',{ 
     'data-id' : cars[i].id 
    }).append(
     $('<a/>',{ 
      text : cars[i].name 
     }) 
    );  
    $('#result-two').append($el); 
} 

http://jsfiddle.net/joepegler/xk4fumgz/3/

Answer 1

성능을 위해이 더 좋은 방법이 될 것입니다 :

var cars = [{"id": 1, "name": "volvo"}, 
      {"id": 2, "name": "nissan"}, 
      {"id": 3, "name": "audi"}]; 
var html = ""; 
for (i = 0; i < cars.length; i++){ 

    var html += "<li data-id="+cars[i].id+"><a>"+cars[i].name+"</a></li>"; 

} 

$('#result-one').append(html); 

이 방법 당신은 한 번만 추가. 더 많은 공연자에게 더 적은 것을 붙이면됩니다.

http://code.tutsplus.com/tutorials/10-ways-to-instantly-increase-your-jquery-performance--net-5551 팁 # 7.

Answer 2

그냥이없는 이유 :

편집

또는 더 나은 :

var items = ''; 
for (i = 0; i < cars.length; i++){ 
    items += '<li data-id="'+cars[i].id+'"><a>'+cars[i].name+'</a></li>'; 
} 
$('#result-two')[0].innerHTML = items; 

이, 그것을 입력하기 쉽고 더 확대됨에 있기 때문에이 - 그것의 $('#el').html() 및보다 빠름 210,뿐만 아니라. jsperf

Answer 3

라이브러리 사용에도 불구하고 라이브러리를 사용하지 않도록하십시오!

var cars = [ 
     { 
      id:1, 
      name:'volvo' 
     }, 
     { 
      id:2, 
      name:'nissan' 
     }, 
     { 
      id:3, 
      name:'audi' 
     } 
    ], 
    result = document.getElementById('result-two'), 
    mainLi = document.createElement('li'), 
    mainA = document.createElement('a'), 
    setText(function(){ 
     if('textContent' in document){ 
      return function(el,text){ 
       el.textContent = text; 
      }; 
     } else if('innerText' in document){ 
      return function(el,text){ 
       el.innerText = text; 
      }; 
     } else { 
      return function(el,text){ 
       el.innerHTML = text; 
      }; 
     } 
    })(); 

for (var i = 0, len = cars.length; i < len; i++){ 
    var li = mainLi.cloneNode(false), 
     a = mainA.cloneNode(false); 

    li.setAttribute('data-id',cars[i].id); 
    setText(a,cars[i].name); 

    li.appendChild(a);  
    result.appendChild(li); 
} 

그리고, 복사 및 붙여 넣기 할 경우 : 새 노드의 id을 변경 것이지만, 깊은 복사를 수행

var copy = result.cloneNode(true); 

. 안된다.하지만 도대체 ... 재미 있었다. 그래도 작동해야하고 요소를 손으로 쓰지 않는 좋은 이점이 있습니다. (당신이 불렀을 때) 초기 "템플릿"노드를 만든 다음 필요한 경우이를 복제 한 다음 적절한 속성/텍스트를 적용합니다. 매우 명확하고, 우연히 매우 빠르게 진행됩니다. :)