使用jQuery动态创建复杂的HTML片段

Question

我希望能够使用jQuery生成（或者至少通过填充某种模板并附加到列表中）一个半复杂的HTML div元素。数据以JSON格式提供（如果重要的话），对于每个父条目，我希望添加另一个div到类似于旋转木马的元素中。

例如，一个长语句：

$('#list').append('<li><div id=" + entry.id +"><span id="highlight> + entry.name + <span/><div id="picture" ....

虽然这样做可以工作，但维护起来太困难了（请原谅错误，这只是为了表达一个观点）。必须有更有效率的方法。

谢谢。

- adamK

Answer 1

您正在研究JavaScript模板语言 - 有很多选择：

• underscore.js；
• mustache.js；
• jade；
• handlebars.js；
• 还有更多...

其思想是将数据和视图分离：

var myUser = { name : 'John', lastname : 'Doe' };

$('#awesomeDiv').html(
    someTemplateFunction( { user : myUser } )
);

someTemplateFunction() 的主体部分将会包含以下内容：

<p>Hello <strong><%=user.name %> <%=user.lastname %></strong></p>

在这里，持有指的是模板库能够解析来自DOM或外部文件的模板，并将其渲染为新的DOM元素。

我选择的是 underscore.js，因为它是一个非常简单但实用的库，随意查看。

- moonwave99

Answer 2

您正在寻找一些模板。 有很多选择：

• Handlebars
• Hogan
• dust.js
• Mustache
• underscore templates
• jQuery templates

- Austin Greco

Answer 3

不知道它是否适用于您正在进行的工作，但最近我遇到了类似的问题，我不想在js中插入HTML。我的解决方案是将所有html插入页面，并将其隐藏起来，以便在需要时可以简单地显示它，或者在某些情况下，我复制所需的div。

- Robyflc

---

这是我曾经考虑过的，可以使用一个隐藏的 div 进行克隆。只是想可能有更简洁的选项。 - adamK

对于大多数情况，我相信肯定有更简洁的选项。不幸的是，对于我的情况，我并没有找到更好的选择。 - Robyflc