Question

我有一个html页面，它会显示用户个人资料的用户名，地点，大概等等。我在jquery中使用ajax获取值。现在我有问题如何将检索到的值分配给DOM：

第一种方法会等到我获取数据然后动态创建dom并附加到目标div

 $.ajax({
     url: "profiledata",
     type: "POST",
     success:function(data){
         $("<div><label>"+data.name</label><br/>
          <label>"+data.place</label></div>").appendTo("target div");
     }

在这种方法中，会发生更多的字符串追加，所以我怀疑该过程消耗的内存。

第二种方法将只使用id来赋值：

 $.ajax({
     url: "profiledata",
     type: "POST",
     success:function(data){
          $("#uname").text(data.name);
          $("#place").text(data.place);
     }

 <div><label id="uname"></label><br/>
<label id="place"></label></div>

在加载页面方面哪一个是有效的，即更轻的代码和页面我提到了一些写法吗？或者有更好的解决方案吗？

Answer 1

重复操作DOM通常会产生开销。从这个角度来看，第一种方法似乎更合适。就ajax调用的速度而言，在两种方法中都以相同的方式检索数据，您可以使用.ajaxStart()和.ajaxStop()来“加载”这种效果。

Answer 2

取决于用例，两种解决方案都有优点和缺点。

第一种方法：

在您需要之前不加载元素
但它也有JQuery在内存中创建元素而不是修改页面上的元素。

第二种方法：

不创建元素，因此我们不在js中查找html，因此修改标记会更容易一些。
现在我们必须记住，如果我们不希望用户看到它们，就隐藏元素

我将使用哪种方法取决于各种因素。一般来说，我更喜欢第二种，因为当我想修改标记时，我不会在javascript中查找。

动态地为dom赋值

2 个答案: