javascript - 动态给dom赋值

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

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

第一种方法:

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

第二种方法:

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

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