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

Question

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

我在js中将它作为JSON。如何循环JSON对象并创建，以最佳方式使用纯JavaScript将多个搜索结果附加到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。 Knockout为HTML标记提供数据绑定属性，并且它具有foreach循环。因此Knockout将遍历您的JSON对象并创建，将多个搜索结果附加到html页面。