如何使用 JavaScript 多次附加 HTML 代码块

Question

我有一个 HTML 代码块（一个标题，一些 li 标签后跟一个链接），它必须作为搜索结果多次显示，其中每个块都是一个结果。

我在 js 中将其作为 JSON 获取。 如何使用纯 JavaScript 以最佳方式遍历 JSON 对象并创建多个搜索结果并将其附加到 HTML 页面中？

注意：我曾经使用 Angular.js 中的指令来做到这一点

Answer 1

我建议使用 AngularJS、Knockout 或其他 MV* 平台来完成此操作，但如果您必须使用纯 JavaScript 来完成此操作，这里的示例中提供了一种基本方法。

 var data = [ { title: "First result", information: [ "Jerry", "George", "Elaine", "Kramer" ], link: "http://example.com" }, { title: "Second result", information: [ "A", "B", "C" ], link: "http://example.com" }, { title: "Third result", information: [ "D", "E", "F" ], link: "http://example.com" } ]; var i = 0, j = 0; for (i = 0; i < data.length; i++) { if (data[i]) { var container = document.createElement('div'); var title = document.createElement('h2'); var items = document.createElement('ul'); var link = document.createElement('a'); title.innerHTML = data[i].title || ""; if (data[i].information) { for (j = 0; j < data[i].information.length; j++) { var item = document.createElement('li'); item.innerHTML = data[i].information[j] || ""; items.appendChild(item); } } link.href = data[i].link || ""; link.innerHTML = link.href; container.appendChild(title); container.appendChild(items); container.appendChild(link); document.body.appendChild(container); document.body.appendChild(document.createElement('hr')); } }

Answer 2

您可以使用淘汰赛。 Knockout 为 HTML 标签提供数据绑定属性，并且它有 foreach 循环。 因此，Knockout 将遍历您的 JSON 对象并创建、附加多个搜索结果到 html 页面。