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

如果您不想使用模板插件（如胡子），这是一个简单的技巧：

将模板放入具有未知类型的虚拟脚本块

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

并使用好像是纯HTML字符串。使用replace将值插入任何占位符：

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

结果已准备好将DOM / insert等附加到DOM中。

注意：

我在这个例子中使用了胡子样式的标记，但是任何唯一的东西都可以匹配。
这使得编辑您的模板WYSIWYG /显而易见，因此维护更容易。

Answer 2

类似的东西：

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

或

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

jquery附加用法而不在字符串中生成HTML

2 个答案: