jquery追加用法，而不生成字符串中的HTML

我想建立一些使用jQuery append（...）的列表元素，但我似乎没有得到正确的语法。我有一部分来自（有正确的输出），但我相信有更好的方法来使用不需要直接从字符串构建HTML的函数。jquery追加用法，而不生成字符串中的HTML

我想要的结果......

<a href='...;'> 
    <div>Wigan</div> 
    <div style="font-size: 8px">Wigan, null, NaN</div> 
</a>

我的JavaScript ...

var result = $("<a>", {href: "..."}); 
result.append("<div>"+ results[index].Region + "</div>"); 
result.append("<div style = \" font-size: 8px\">" + results[index].District + ", " + results[index].Postcode + ", " + +results[index].CountryCode + "</div>");

我有上述作品什么，但我怎么组追加调用和内容构建这件事而不是像上面那样简单地创建字符串？

谢谢。

来源

2015-05-06 Martin Robins

有你看着像[胡子]（http://mustache.github.io/）到模板像这样重复的元素？ –

@BrianMuenzenmeyer：不，到现在为止我从来没有听说过它。如果可能的话，我宁愿避免在这个时候添加新的框架，尽管我知道我可以通过jQuery实现我所需要的，即使我按照上面所示的方式来完成。不过谢谢。 –

可以理解。模板框架给了你很大的权力 - 但TrueBlueAussie下面描述的将在一个绑定:) –

喜欢的东西：

result.append($('<div>').html(results[index].Region), $('<div>',{ style:' ...' }));

或

$('<div>').html(results[index].Region).appendTo(result)

来源

2015-05-06 15:17:53 gin93r

如果你不想使用模板插件（如胡子）这里是一个简单的一招：

把你的模板，在一个虚拟的脚本块有一个未知类型

<script type="text/template" id="template"> 
     <a href='...;'><div>{{name}}</div><div style="font-size: 8px">{{name}}{{someother}}</div></a> 
</script>

和使用如果它是一个纯HTML字符串。使用替换来将您的值插入任何占位符：

var html = $('#template').html().replace(/{{name}}/g, myname).replace(/{{someother}}/g, someother)

结果准备好将追加/插入等到DOM中。

注：

我使用的胡子样式的标记在这个例子中，但独特的东西会做匹配。
这使编辑您的模板所见即所得/明显，维护更容易。

来源

2015-05-06 15:15:08

我喜欢你在那里做了什么，但为了与应用程序目前建立的方式保持一致，我使用了@Veo的解决方案。谢谢。 –

@Martin Robins：你的电话。你问了一个*更好的方法（有几个）:) –

是的，这是这类问题的问题。许多方法去皮肤猫，它归结为个人的品味。 – gin93r

jquery追加用法，而不生成字符串中的HTML

回答

相关问题