从jQuery在页面上插入"复杂"元素的最佳方法是什么？

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();

我发现这种方法的优点是,在结构发生变化的情况下,可以通过调整选择器来轻松修改此代码.

Answer 2

如果您想牢记可读性，那么以下方法既干净又不执行任何不必要的 jQuery 查找来添加内容。

var div = '<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>';

$('#itemList').append(div);