动态（AJAX）HTML创建

Question

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

对我来说，这是一项非常常见的任务： 通过POST向服务器提交内容 - ＆gt;以JSON格式获取结果列表 - ＆gt;取这个0到n结果的列表并显示它们，通常作为列表。这通常意味着在Javascript（jQuery）中构建实际的HTML，例如：

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

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

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

我宁愿做更多事情。 也许元素将以某种方式定义 - 它是在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原型并非没有问题，但在这种情况下，可以通过使用函数轻松避免。

Answer 2

1. 让网页设计师创造一个漂亮的 虚拟列表，如果他/她还没有 创建了一个
2. 删除所有虚拟列表     元素，但一个
3. 隐藏最后一个     剩余的列表元素（例如     显示：无）
4. 在最后剩下的     元素，创建占位符     服务器发送的变量（例如     跨度）
5. 在您的JavaScript中，深入克隆     元素，进行替换，     使元素可见，并附加     适当节点的元素

我不会在服务器上生成HTML。

Answer 3

为什么不考虑使用目标Dom Element的参数和要添加的数据编写泛型函数？你可以想到一个通用的方法，如：

function GenericAjaxResponseHandler(TargetElement, AjaxResponse)
{
    //Implemet the handler here
}

Answer 4

正如您所提到的，创建新元素的最简单方法是在后端，您可以完全控制纯HTML中的创建。在客户端，您必须以编程方式创建所有这些元素。但是，此方法的最大缺点是您要杀死JSON提供程序的可重用性。

如果您对数据可重用性，RESTful类似系统和OOP元素创建感兴趣，我建议Dean Edward's Base JS class，简化JavaScript中的OOP ，可以帮助您创建自定义元素和构建器。

使用 Base ，您可以创建一个简单的类层次结构，使您的代码可读和可维护。

如果您关注的是jQuery元素创建效率，请阅读此question