动态赋值给dom

Dynamically assign value to dom

本文关键字：dom 赋值 动态      更新时间：2023-09-26

我有一个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>

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

根据用例的不同，两种解决方案各有优缺点。

第一个方法:

  • 不加载元素，直到你需要它们
  • 但是它也让JQuery在内存中创建元素而不是修改页面上的元素。

第二个方法:

  • 不是创建元素，所以修改标记更容易，因为我们不是在js中寻找html。
  • 现在我们必须记住隐藏元素如果我们不想让用户看到它们

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

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

相关文章：