Jquery 在javascript中输出html

我一直在升级遗留页面，以便使用AJAX加载数据

ajax调用返回具有自定义属性的对象

{ 
  item: {
    id: 1,
    name: 2,
   ...
  }
}

在我的AJAX调用中，我正在构建元素

$.post("./url/returns-json", query, function(data) {
   var response = JSON.parse(data);
   $.each(response , function(i, v){
       var r = '<div class="style-this"><p>';
       var r += v.name;
       var r += '</p></div>';
       $("item-wrap").append(r);
   });
});

$.post（“./url/返回json”，查询，函数（数据）{
var response=JSON.parse（数据）；
$。每个（响应、功能（i、v）{
var r=''；
var r+=v.name；
var r+='
'；
$（“项目包装”）。追加（r）；
});
});

是否有另一种方法将json响应包装为HTML格式以供显示

---

当构建大型HTML元素时，此方法可能会变得非常混乱。最好的方法可能是：

$('#item-wrap').append(
  $('<div>').addClass('style-this').append(
    $('<p>').text(v.name)
  )
);

$（'#项目包装'）。追加(
$（''）.addClass（'style-this'）.append(
$（“”）.text（v.name）
)
);

在我看来，jQuery实际上非常适合动态构建HTML结构。通过缩进代码，可以很好地看到结构，而

text

等实用函数允许您安全地插入内容（请参见XSS）

---

我假设

item wrap

实际上是元素标识符，而不是标记名。这不会影响我的答案。

您可以而且可能应该使用。当您只想添加几个元素时，这看起来可能会更长，甚至更乏味，但是当您进行详细和广泛的dom操作时，使用jQuery方法可以使其更可持续、更易于阅读

$.each(response, function(i, v) {
  var div = jQuery("<div>").addClass("style-this"),
    p = jQuery("<p>").text(v.name);
  p.appendTo(div);
  div.appendTo($("item-wrap"));
});

$。每个（响应、函数（i、v）{
var div=jQuery（“”.addClass（“设置此样式”），
p=jQuery（“”）。文本（v.name）；
p、 附件（分部）；
分部附件（$（“项目包装”）；
});

---

虽然您可以通过相互添加附件来缩短这一过程，但当您添加任意两个或三个以上的元素时，如果对它们进行了额外的操作，链接它们会使阅读变得非常困难。

您是否将其视为模板引擎？

我个人使用类似的方法：

var template='<div class="style-this"><p>{{name}}</p></div>',
    results=[];
$.each(response , function(i, v){
  results.push(template.replace('{{name}}',v.name));
});
$("item-wrap").append(results.join(''));

---

您可能应该使用类似的模板语言。你可以编译你的模板来调用数据，它将把你从角落案例、转义实体等中解救出来。你是在使用jQuery并手动组装HTML代码吗？哦，天哪，这就是jQuery的用途<代码>$（''）.append（$（''）.text（v.name））@jonsurll任何其他即插即用且不需要安装node、npm等的lib-我可以将其放入单个文件中，而不是整个系统。我建议只在循环外部执行一次

附加

。附加到DOM是一项非常密集的操作，应该尽可能少地执行。@仍然有很好的学习点。然而，即使在输出大的html块时使用适当的方法来构建html。好的一点-我会尝试一下-我希望找到一个可以像即插即用模板一样工作的库（不像jade）我可以在选择的页面上使用它，这与我正在寻找的类似-在实现一个完整的模板系统之前，我可以立即使用它。

function format(template, map) {
  return template.replace(/{([a-z_]+[a-z0-9_]*)}/gi, function(tag, name) {
    return map[name] ? map[name]  : '';
  });
}

// example
alert(format('test {ex} or {deus} {blank}', {'ex' : 'me', 'deus' : 'yourself'}));