我正在调用一个以JSON格式返回对象数组的Web服务.我想获取这些对象,并用HTML填充div.假设每个对象都包含一个url和一个名称.

如果我想 for each 对象生成以下HTML:

<div><img src="the url" />the name</div>

有没有这方面的最佳实践?我认为有几种方法可以做到这一点:

  1. 连接字符串
  2. 创建元素
  3. 使用模板插件
  4. 在服务器上生成html,然后通过JSON提供.

推荐答案

选项#1和#2将是您最直接的选项,但是,对于这两个选项,您将感受到构建字符串或创建DOM对象对性能和维护的影响.

模板化并不是那么不成熟,你可以在大多数主要的Javascript框架中看到它.

下面是一个JQuery Template Plugin分制的例子,它将为您节省性能损失,而且非常非常简单:

var t = $.template('<div><img src="${url}" />${name}</div>');

$(selector).append( t , {
     url: jsonObj.url,
     name: jsonObj.name
});

我说走酷的路由(更好的性能,更好的可维护性),并使用模板.

Html相关问答推荐

让多对图像在各自的div中叠加

如何用等宽字体固定数字在有序列表中的位置

CSS Grid:使网格行填充屏幕,将下一行推离屏幕

Flexbox在元素之间造成了太大的差距

如何生成随机字符串的字母数字字符集长度到html跨度?

如何使用多边形制作如图所示的背景

如何在黑暗模式切换中添加图标

如何使用 Flutter 构建 Chrome 扩展?

图像如何能达到 HTML 表格的全宽?

主要元素内滚动时,固定导航栏会消失

Sass 混合动画未正确应用

如何使用 Bootstrap Grid 系统修复大屏幕上图片和进度条之间的空白?

如何只为 Navbar 中的一个元素提供动画,其余元素没有使用 css 的动画

透明渐变凹矩形

把标题、段落和图片放在一起

在一行中对齐两个不同形式的按钮

用 flexbox 和 overflow 覆盖

无法在 css 的 body 标签中正确呈现(内联显示)

尽管文本内容设置为中心,如何将某些文本定位到右侧?

为什么我的 img 会从开发工具中的 div 流出?