我正在寻求关于这个主题的意见,如下所述.特别是我正在寻找关于如何动态构建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