javascript – 动态(AJAX)HTML创建

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

这对我来说是一项非常普遍的任务：
通过POST向服务器提交内容 – >以JSON格式获取结果列表 – >取这个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)？

解决方法:

克隆元素据说非常快,所以我有时会做的是包含要在初始页面中生成的元素的模板,display：none.然后,当我从服务器接收数据时,我可以

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

那么,这取决于必须更换多少.有时我只是设置所需的属性并设置文本等,有时我在模板中有占位符并且类似于

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

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