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

Appending content to li elements from JSON array

本文关键字：li 元素 数组 JSON      更新时间：2023-09-26

我有一个包含 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>

爪哇语

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 数组和实时代码

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

就我而言，我得到了一个空列表，其中没有填写任何数据。

请提供任何帮助吗？

假设您实际想要做的是将每个项目添加到一个相应的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);
}
相关文章：