动态 (AJAX) HTML 创建答案

【问题标题】：Dynamic (AJAX) HTML creation动态 (AJAX) HTML 创建
【发布时间】：2010-02-22 15:46:57
【问题描述】：

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

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

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

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

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

我宁愿做更多面向对象的事情。也许一个 Element 会以某种方式定义 - 它是在一个 div 中，跨度，它包含什么......所以我可以做这样的事情：

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

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

（另外，在后端构建 HTML 怎么样，在这种情况下是 Django）？

【问题讨论】：

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

正如您所提到的，创建新元素的最简单方法是在后端，您可以完全控制纯 html 中的创建。而在客户端，您必须以编程方式创建所有这些元素。然而，这种方法最大的缺点是你扼杀了 JSON 提供者的可重用性。

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

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

如果您担心 jQuery 元素创建效率，请阅读此question

【讨论】：