javascript - jquery追加用法而不在字符串中生成HTML

Question

我正在尝试使用 jQuery append(...) 构建一些列表元素，但我似乎语法不正确。我已经完成了部分工作(具有正确的输出)，但我确信有更好的方法来使用该函数，不需要我直接从字符串构建 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>");

我上面的内容有效，但是如何对附加调用和内容进行分组以构建它，而无需像上面那样简单地创建字符串？

谢谢。

Answer 1

如果您不想使用模板插件(如 moustache)，这里有一个简单的技巧:

将模板放入类型未知的虚拟脚本 block 中

<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 中。

注释:

• 在本示例中我使用了 mustache 样式的标记，但任何独特的标记都可以匹配。
• 这使得编辑模板所见即所得/显而易见，因此维护更加容易。