使用Javascript和變量將HTML添加到頁面

Question

因此，我將在HTML頁面中添加和刪除大量內容，這些內容具有相對復雜的樣式和數據集，這將取決於clicked元素。 一個例子看起來像這樣...

<li class="foo">
    <div class="slider" data-one="foo" data-two="bar"></div>
    <img class="thumb" src="img/foo.png" alt="foo" />
    <input class="sliderInput" type="number" data-one="foo" min="0" max="240">
</li>

現在， foo和bar將根據最初單擊的元素（其中將近100個元素）來確定，而且很少會一次看到超過4-5個元素，因此我避免將它們全部用純HTML編寫。

經過一番研究，我打算按照這些思路做一些事情……但是這樣做很臟：

function createSlider(foo){
  var fooLi = $('<li></li>').addClass(troop);
  fooLi.append($('<div></div>').addClass('slider').data('one', foo).data('two', database[troop]["two"]));
  fooLi.append($('<img />').attr({
    src: 'img/' + foo + '.png',
    alt: foo
  });
  fooLi.append($('<input />').addClass('sliderInput').data('one', foo).attr({
    type: 'number',
    min: 0,
    max: 240
  }));
  $('#whatever').append(fooLi);
}

這是使用jQuery做到這一點的合理方法嗎？ 還是我在這里看不到更有效率的東西？

Answer 1

看一下此鏈接： https : //jsperf.com/jquery-append-vs-html-list-performance/103

他們使用創建/添加/添加元素到DOM的不同方法評估速度（以ops / sec為單位）