Добавьте большой кусок HTML с JQuery

Question

Я разрабатываю сайт, который использует прогрессивное усовершенствование, а также имеет мобильную версию. Я хочу использовать jquery для добавления слайд-шоу на рабочий стол и хочу знать лучший способ добавления большого количества HTML. Образец того, что я намерен добавить это:

<!-- Slideshow --> 
<div class="scrollable"> 
<!-- "previous page" action --> 
<a class="prev browse left"></a> 

<!-- root element for the items --> 
<ul> 
    <li> 
     <img src="images/slideshow/image1.jpg" alt="image 1" title="image 1" /> 
    </li> 

    <li> 
     <img src="images/slideshow/image2.jpg" alt="image 2" title="image 2" /> 
    </li> 

    <li> 
     <img src="images/slideshow/image3.jpg" alt="image 3" title="image 3" /> 
    </li> 

    <li> 
     <img src="images/slideshow/image4.jpg" alt="image 4" title="image 4" /> 
    </li> 

    <li> 
     <img src="images/slideshow/image5.jpg" alt="image 5" title="image 5" /> 
    </li> 
</ul> 

<!-- "next page" action --> 
<a class="next browse right"></a> 

Я был бы лучше с помощью команды добавления или метод HTML для чего-то вроде этого. У меня также возникла другая идея, что я могу создать переменную с HTML внутри и использовать JQuery для добавления содержимого, но я попытался и не смог на этом (недостаточно знаний!). Буду признателен за любые советы.

Answer 1

Вы можете сделать тесты для любых сравнений, как это:

function test(name, fn, n, next) { 

    var n = n || 100; // default number of runs 
    var start, end, elapsed; 

    setTimeout(function() { 
    start = Number(new Date()); 
    for (; n--;) { 
     fn() 
    } 
    end = Number(new Date()); 

    elapsed = end - start; 

    // LOG THE RESULT 
    // can be: $("#debug").html(name + ": " + elapsed + " ms"); 
    console.log(name + ": " + elapsed + " ms")); 

    next && next(); 
    }, 0); 
} 

test("append", function() { 
    $("#elem").append(LARGE HTML); 
}); 

test("html", function() { 
    $("#elem").html(LARGE HTML); 
}); 

то, что я хотел бы попробовать создать новый элемент и установить его HTML в большой кусок, а затем добавить этот элемент в DOM. Это будет быстрее, на мой взгляд, потому что при применении html элемент не отображается, поэтому браузер может работать быстрее, а затем ему нужно добавить только один элемент в DOM.

See it in action. (нажмите превью)

(кажется, что HTML() быстрее)

Answer 2

Использование append в порядке, но я хотел бы использовать его только один раз или как можно меньше, и конструировать HTML заранее, удерживая его в строковой переменной.

В общем, очень мало манипуляций с DOM действительно должно быть выполнено. Вы должны попасть в DOM таким образом, только когда это абсолютно необходимо. Рассмотрим следующий пример:

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

for (i=0; i<1000; i++){ 
    $myList.append("This is list item " + i); 
} 

Этот код добавляет 1000 строк в список HTML. Это делается с 1000 последовательными вызовами метода .append() и, следовательно, 1000 манипуляций с DOM. Следующий код, модифицированный из приведенного выше примера показано, как это можно сделать более эффективным:

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

for (i=0; i<1000; i++){ 
    li += "<li>This is list item " + i + "</li>"; 
} 

$myList.append(li); 

Смотрите следующую статью: http://www.jameswiseman.com/blog/2010/04/20/jquery-standards-2-dom-manipulation/

Answer 3

Я хотел бы использовать родной innerHTML для всего куска, это доказано, что самый быстрый способ сделать DOM-манипуляции. См. F.ex здесь: http://www.quirksmode.org/dom/innerhtml.html

<div id="container"></div> 

<script> 
var html = '<p>Some HTML</p>'; 
document.getElementById('container').innerHTML = html; 
</script>