Javascript 通过Jquery生成HTML的更好方法

我觉得我的方法不可读，从JSON对象生成项目列表并将其添加到现有div中看起来很难看

我的html：

<ul id='to-be-filled'> </ul>

我的javascript

myJson = [
    {
        "title": "First",
        "action": "1st"
    },
    {
        "title": "Second",
        "action": "2nd"
    },
    {
        "title": "Third",
        "action": "3rd"
    }
]


function genList(){
var outputList = '';

$.each(myJson, function() { 
  outputList += '<li>' + this.title + ': ' + this.action + '</li>'
});

$('#to-be-filled').html(outputList); //set the generated html string.
}

$(document).ready(function() {
  genList(); //init
});

myJson=[
{
“标题”：“第一”，
“行动”：“第一次”
},
{
“头衔”：“第二”，
“行动”：“第二次”
},
{
“头衔”：“第三”，
“行动”：“第三次”
}
]
函数genList（）{
变量输出列表=“”；
$.each（myJson，function（）{
outputList+='
'+this.title+'：'+this.action+'
'
});
$（“#待填充”）.html（outputList）；//设置生成的html字符串。
}
$（文档）.ready（函数（）{
genList（）；//初始化
});

结果如下：

---

我如何改进这种添加html字符串的混乱局面，尤其是我的真实代码具有更复杂的DOM和JSON数据结构？

如果您需要在客户端执行大量操作，我会考虑使用。该插件目前处于测试阶段，因此可能会有所更改，但我认为它的基本功能已经准备好了。或者您可以为jQuery使用另一个模板插件，有几种。我的主要信息不是“使用jQuery模板”，而是“使用模板”。-）

但是，这个特定的插件正在出现，并且背后有一些主要力量。有两种不同的方法可以定义模板：将模板作为

脚本

元素包含在文档中：

<script id="your-li-template" type="text/x-jquery-tmpl">
    <li>${title}: ${action}</li>
</script>

或者，您可以在JavaScript代码中将其定义为字符串，然后以稍微不同的方式使用它（我怀疑，这一差异是它仍处于测试阶段的原因之一）：

//编译一次
var t=$.template（“
${title}:${action}
”；
//根据需要经常使用它
var outputList=$.tmpl（t，myJson）；

---

在这两种情况下，显然（从示例中）如果您给它一个数组，它将根据模板重复计算数组中的每个项目，因此您甚至不必循环。

Mustach似乎是一个不错的模板替代品，您可以在javascript和服务器端脚本上使用它，因此，您只需为所有web代码学习一个模板系统。

我已经阅读了许多建议，在执行此类操作时不应使用字符串连接。相反，这样的做法往往会带来显著的性能改进，尤其是在大量元素的情况下：

var toAdd = [], i = -1;

$.each(myJson, function () {
  toAdd[++i] = '<li>';
  toAdd[++i] = this.title;
  toAdd[++i] = ': ';
  toAdd[++i] = this.action;
  toAdd[++i] = '</li>';
});

$('#to-be-filled').html(toAdd.join(''));

var toAdd=[]，i=-1；
$.each（myJson，函数（）{
toAdd[++i]='
'；
toAdd[++i]=此标题；
toAdd[++i]='：'；
toAdd[++i]=这个动作；
toAdd[++i]='
'；
});
$（“#待填写”）.html（toAdd.join（“”））；

---

这是否符合“清洁”标准是一个艰难的决定。我个人已经习惯了这种语法，发现它很容易处理，但它是6的。不过，表演肯定在那里；我可以保证使用这种方法可以有效地添加数百个元素，而不会出现超时或浏览器挂起。

这里有一个不同的版本，它使用数组而不是对象。有时，我发现对象比具有隐式字段位置的数组更混乱。您可以决定哪一个对您更有意义：

myJson = ["First", "1st", 
         "Second", "2nd", 
         "Third", "3rd"];

function genList(){
    var outputList = '';

    for (var i = 0; i < myJson.length; i++) { 
          outputList += '<li>' + myJson[i++] + ': ' + myJson[i] + '</li>'
}

$('#to-be-filled').html(outputList); //set the generated html string.
}

$(document).ready(function() {
  genList();
});

myJson=[“第一”，“第一”，
“第二”、“第二”，
“第三”、“第三”]；
函数genList（）{
变量输出列表=“”；
对于（var i=0；i'
}
$（“#待填充”）.html（outputList）；//设置生成的html字符串。
}
$（文档）.ready（函数（）{
genList（）；
});

---

JSFIDLE:

+1用于jquery模板，非常易于使用且功能强大。：）再加一个+1。现在广泛使用它，效果很好。只是用于我的实时代码，它踢屁股！非常类似于django模板系统。

var toAdd = [], i = -1;

$.each(myJson, function () {
  toAdd[++i] = '<li>';
  toAdd[++i] = this.title;
  toAdd[++i] = ': ';
  toAdd[++i] = this.action;
  toAdd[++i] = '</li>';
});

$('#to-be-filled').html(toAdd.join(''));

myJson = ["First", "1st", 
         "Second", "2nd", 
         "Third", "3rd"];

function genList(){
    var outputList = '';

    for (var i = 0; i < myJson.length; i++) { 
          outputList += '<li>' + myJson[i++] + ': ' + myJson[i] + '</li>'
}

$('#to-be-filled').html(outputList); //set the generated html string.
}

$(document).ready(function() {
  genList();
});