如何使用 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 頁面。