ajax创建html,javascript – 动态(AJAX)HTML创建

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

这对我来说是一项非常普遍的任务：

通过POST向服务器提交内容 – >以JSON格式获取结果列表 – >取这个0到n结果的列表并显示它们,通常作为列表.这通常意味着在Javascript(jQuery)中构建实际的HTML,例如：

HTMLResult = "

HTMLResult = HTMLResult + JSONDataElement

HTMLResult = "

"

...

然后我使用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原型并非没有问题,但在这种情况下,可以通过使用函数轻松避免.

标签：javascript,ajax,dynamic,html

来源： https://codeday.me/bug/20190701/1343470.html