使用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为单位）