Javascript 动态地为dom赋值

我有一个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");
     }

$.ajax({
url:“profiledata”，
类型：“POST”，
成功：功能（数据）{
$（“”+数据名称

“+data.place”）。附录（“目标部门”）；
}

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

第二种方法是仅使用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>

$.ajax({
url:“profiledata”，
类型：“POST”，
成功：功能（数据）{
$（“#uname”）.text（data.name）；
$（“#place”）.text（data.place）；
}

哪一个在加载页面（即更轻的代码和页面）方面更有效

---

我提到过一些写方法吗？或者有更好的解决方案吗？

重复操作DOM通常会带来开销。从这个角度来看，第一种方法似乎更合适。

---

就ajax调用的速度而言，在这两种方法中以相同的方式检索数据，您可以使用

.ajaxStart（）

和

.ajaxStop（）

来产生“加载”效果。

取决于用例，这两种解决方案各有优缺点

第一种方法：

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

第二种方法：

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

---

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

6种方法中的六种，取决于您的使用情况和可读性。我不相信在性能上会有任何显著差异。在第一个方法，所有的

“”+data.name
“+data.place”

在追加之前必须由jQuery解析。我认为第二种更有效。根据项目的复杂性，可能值得使用众多Javascript MV*框架中的一种，它允许您轻松地将DOM绑定到数据源。一些示例是，和。这些示例允许您从服务器，不必担心更新DOM；框架会为您做这件事。这是否意味着如果我有一些固定的类似DOM的用户配置文件，它们总是相同的，我们应该使用第二种方法，如果它的动态DOM（如显示不断变化的注释）应该使用第一种作为一般规则，是的，我会这样做。