jquery - 从 jQuery 在页面上插入 "complex"元素的最佳方法是什么

Question

我有一个按钮，可以使用 ajax 从服务器获取一些数据，完成后，它应该向 DOM 添加一个元素。

要添加的元素将是这样的

<div class="SomeClass">
  <div class="SomeOtherClass">
    <span class="Name">name from server</span>
    <span class="Manufacturer">manufacturer from server</span>
  </div>
  <span class="Weight">weight from server</span>
</div>'

在我从服务器获取数据的 jQuery 函数中，创建此结构的最佳方法是什么，将来自服务器的数据(名称、制造商和重量)放在正确的位置，然后将其放入DOM。我已经让它像这样工作了:

$("#ItemList").append('<div class="SomeClass"><div class="SomeOtherClass"><span class="Name">' + value.name + '</span><span class="Manufacturer">' + value.manufacturer + '</span></div> ' +
                       '<span class="Weight">' + value.weight + '</span></div>');

但这看起来不太好，而且很难看出正确的结构。

以干净的方式执行此操作的最佳方法是什么？

Answer 1

如果我需要结构的多个“版本”，我会添加类似的内容

<div class="SomeClass" id='SomeClassTemplate' style='display:none'>
   <div class="SomeOtherClass">
      <span class="Name">name from server</span>
      <span class="Manufacturer">manufacturer from server</span>
   </div>
   <span class="Weight">weight from server</span>
</div>

在我的html正文的底部，然后在我要添加元素的事件处理程序中我会这样做

var newDiv = $("#SomeClassTemplate").clone();
newDiv.attr("id","whatever") 
// remember this id should be different for each instance. or you can remove it
.appendTo("whatever") // depends on where in DOM you want to insert it
.find(".name").html("My name");

newDiv.find('.manufacturer').html("my manufacturer);
newDiv.show();

我发现这种方法的优点是，如果结构发生变化，可以通过调整选择器轻松修改此代码。