Question

我有一个包含4个项目的无序列表，我想在每个li元素中添加一个带有“meta”类的div，这个div包含应该从JSON数组中填充的h2和p元素。

<ul id="list">
  <li>
    <div class="meta">
       <h2>Title here</h2>
       <p>Some description</p>
    </div>
  </li>
  <li>
    <div class="meta">
       <h2>Title here</h2>
       <p>Some description</p>
    </div>
  </li>
  <li>
    <div class="meta">
       <h2>Title here</h2>
       <p>Some description</p>
    </div>
  </li>
  <li>
    <div class="meta">
       <h2>Title here</h2>
       <p>Some description</p>
    </div>
  </li>
</ul>

的Javascript

var nums = document.getElementById("list");
var listItem = nums.getElementsByTagName("li");
var listItemElement =  document.querySelectorAll("li");

var output;
for (var i in data.info) {
    output+="<div class='meta'>";
    output+="<h2>" + data.info[i].title +"</h2>";
    output+="<p>" + data.info[i].desc +"</p>";
    output+="</div>";

    for (var x = i; listItem.length; x++) {
      listItem[x].appendChild(output); 
    }

    //clear the object after every append
    output = "";
}

在Javascript代码中，我尝试在主要代码中添加一个循环，因此当填充输出对象时，它应该附加到当前的li元素。

您可以找到JSON数组和实时代码here

代码应该如何工作？它应该从JSON数组中取出每个项目并将其附加到li元素，直到它到达最后一个。

在我的情况下，我得到一个没有数据的空列表。

请帮忙吗？

Answer 1

假设您真正想要做的是将每个项目添加到一个各自的li，那么就不需要内循环。

由于您没有使用jQuery，因此无法附加HTML字符串 - 但在这种情况下，innerHTML可以正常工作，因为li元素已经为空，我们不会需要保留任何现有内容。

var data = {
  "info": [{
    "title": "Title Here",
    "desc": "This is some info about this item, it ranges from 20 to 30."
  }, {
    "title": "Title Here 2",
    "desc": "This is 2 some info about this item, it ranges from 20 to 30."
  }, {
    "title": "Title Here 3",
    "desc": "This is 3 some info about this item, it ranges from 20 to 30."
  }, {
    "title": "Title Here 4",
    "desc": "This is 4 some info about this item, it ranges from 20 to 30."
  }]
}

var nums = document.getElementById("list");
var listItem = nums.getElementsByTagName("li");

for (var i in data.info) {
  var output = "<div class='meta'>" +
    "<h2>" + data.info[i].title + "</h2>" +
    "<p>" + data.info[i].desc + "</p>" +
    "</div>";

  var li = listItem[i];

  li.innerHTML = output;
}

<ul id="list">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

如果您的data可能包含<或其他HTML字符，则您需要将文本作为TEXT节点而不是HTML插入：

for (var i in data.info) {
  var div = document.createElement('div');
  div.className = 'meta';

  var h2 = document.createElement('h2');
  var ht = document.createTextNode(data.info[i].title);
  h2.appendChild(ht)

  var p = document.createElement('p');
  ht = document.createTextNode(data.info[i].desc);
  p.appendChild(ht)

  div.appendChild(h2);
  div.appendChild(p);

  var li = listItem[i];

  li.appendChild(div);
}

将内容附加到JSON数组中的li元素

1 个答案: