Javascript 在for循环中编写代码

我目前正在使用类似以下示例（简化版本）的for循环将JSON结果写入页面：

var输出=”；
（我回应）{
var ID=响应[i].ID
var name=response[i].name
输出+=“”+名称+“”
}
$（“#所有结果”）.html（输出）；

---

输出变量已变得臃肿和混乱。由于插入变量和以后修改代码特别困难，有没有不需要“”就写入输出变量的方法？

只需使用单引号避免转义，如下所示：

output+=''+name+''；

为了让它看起来更“简单”，我会做以下几点

var allResults = $("#allResults");
for ( i in response ) {
    var ID = response[i].ID,
        name = response[i].name;

    $('<div/>')
        .attr('id', ID)
        .html(name)
        .appendTo(allResults);
}

var allResults=$（“#allResults”）；
（我回应）{
var ID=响应[i].ID，
名称=响应[i]。名称；
$('')
.attr（'id'，id）
.html（名称）
.附录（所有结果）；
}

您真正需要做的是创建表示DOM的DOM元素，而不是表示DOM的字符串

文档对象模型：页面上元素及其关联值的记录

为了创建元素，jQuery提供了几个快捷方式

span = $("<span>");
div = $("<div >");
anchor = $("<anchor >");
//etc.

当从JSON重新创建结构时，应该使用这种类型的模式

var output = $("#allResults");
for (i in response) {
    var pair = $("<div>");
    pair[0].id = response[i].ID;
    pair.text(response[i].name);

    output.append(pair);
}

var输出=$（“#所有结果”）；
（我回应）{
变量对=$（“”）；
对[0]。id=response[i]。id；
text（响应[i].name）；
输出。追加（对）；
}

根据浏览器版本的不同，您可能可以使用，这样可以获得更可读的代码。就你而言：

output += `<div id="${response[i].ID}">${response[i].NAME}</div>`;

output+=`${response[i].NAME}`；

注意后面的引号或反勾号` 不过，模板引擎更适合较大的内容。

试试看

示例：

JSON.stringify（数据）

这个怎么样

var响应=[
{ID:1，名称：“a”}，
{ID:2，名称：“b”}，
{ID:3，名称：“c”}，
{ID:4，名称：“d”}
];
var输出=”；
var divElement=“$name”
（我回应）{
var ID=响应[i].ID
var name=response[i].name
output+=divElement.replace（$id），id.replace（$name），name）
}
$（“#所有结果”）.html（输出）


尝试下面的
HandlebarJS
模板化片段。
包括：

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>

您应该使用模板或数据绑定引擎，如Handlebars或Knockout。@T先生，试试我的handlebarjs模板回答我已经到了一个地步，我有很多代码&只是太乱了（括号中的颜色不正确！）。我正在根据SLaks的建议寻找车把。当然模板制作会更好。我正在寻找某种形式的诱人引擎，因为我的生产代码非常繁忙&变得难以管理。谢谢你的回复，因为这会比我做的更简单。谢谢。我希望在生产模型的输出中加入更多的内容，因此我可能最终会遇到与此相同的维护任务，但感谢您的回答，因为根据我的示例，简单的输入是直接的。这就是我想要的（某种程度上）。从第三方API返回的JSON数组具有不同的响应量，但我应该能够处理这个问题。谢谢
var output = $("#allResults");
for (i in response) {
    var pair = $("<div>");
    pair[0].id = response[i].ID;
    pair.text(response[i].name);

    output.append(pair);
}

output += `<div id="${response[i].ID}">${response[i].NAME}</div>`;

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0/handlebars.js"></script>

<script id="name-template" type="text/x-handlebars-template">
  {{#each people}}
    <div id="{{ID}}">{{name}}.</div>
  {{/each}}
</script>

<div class="content-placeholder"></div>

$(function () {
  // Grab the template script
  var theTemplateScript = $("#name-template").html();

  // Compile the template
  var theTemplate = Handlebars.compile(theTemplateScript);

  // This is the default context, which is passed to the template
  var context = {
    people: [ 
      { ID: 1000, name: 'Simpson' },
      { ID: 1001, name: 'Griffin' },
      { ID: 1002, name: 'Cartman' },
      { ID: 1003, name: 'McCormick' }
    ]
  };

  // Pass our data to the template
  var theCompiledHtml = theTemplate(context);

  // Add the compiled html to the page
  $('.content-placeholder').append(theCompiledHtml);
});