javascript - 动态 (AJAX) HTML 创建

Question

我正在寻求有关此主题的意见，如下所述。特别是，我正在寻找关于如何动态构建 HTML 的“最知名方法”或设计模式。

这对我来说是一项非常常见的任务: 通过 POST 向服务器提交内容 --> 以 JSON 格式返回结果列表 --> 获取这个 0 到 n 个结果的列表并显示它们，通常作为列表。这通常意味着使用 Javascript (jQuery) 构建实际的 HTML，例如:

HTMLResult = "<div id=....     "
HTMLResult = HTMLResult + JSONDataElement
HTMLResult = "</div>"
...

然后我使用 jQuery 添加每个元素或将它们捆绑起来并替换某些容器 div 的 HTML。

我厌倦了这样做。它容易出错、丑陋、低效等......

我宁愿做一些面向对象的东西。 或许 Element 会以某种方式定义 - 它是否在 div 中，span，它包含什么......这样我就可以做这样的事情:

tempElement = new Element
tempElement.text = JSONData.text
ResultsList.addElement(tempElement)

我正在寻求任何关于更好的方法来完成我所描述的内容的意见。我更喜欢最小的工具集:HTML、CSS、jQuery。

(还有如何在后端构建 HTML，在本例中为 Django)？

Answer 1

克隆元素应该是相当快的，所以我有时会在初始页面中包含要生成的元素模板，使用 display: none。然后，当我从服务器接收到数据时，我可以

var newElement = $('#some-template').clone().removeAttr('id');

然后，这取决于必须更换多少。有时我只是设置所需的属性并设置文本等，有时我在模板中有占位符并进行类似

newElement.html(newElement.html().supplant(paramObj));

其中 paramObj 包含替换占位符的值，supplant 取自 Crockford .当然，修改 String 原型(prototype)并非没有问题，但在这种情况下，可以通过使用函数轻松避免。