在 for 循环中添加 innerHTML 以生成列表

Question

我正在编写一个脚本来通过 LinkedIn api 显示公司的状态更新。该脚本是这样工作的，但我无法使生成的列表项出现在 <ul></ul> 标记内。现在我的代码是这样的：

<script type="text/javascript" src="https://platform.linkedin.com/in.js">
  api_key: my_client_id
  onLoad: onLinkedInLoad
  authorize: true 
</script>
<script type="text/javascript">
function onLinkedInLoad() {
  IN.Event.on(IN, "auth", onLinkedInAuth);
}

function onLinkedInAuth() {
  var cpnyID = 2414183; //LinkedIn's testDevCo
  IN.API.Raw("/companies/" + cpnyID + "/updates?event-type=status-update&start=0&count=20&format=json")
    .result(displayCompanyUpdates);
}

function displayCompanyUpdates(result) {
  var div = document.getElementById("displayUpdates");

  div.innerHTML = "<ul>";

  var resValues = result.values;
  for (var i in resValues) {

    var share = resValues[i].updateContent.companyStatusUpdate.share;
    var content = share.content;
    var isTitled = content,
      isLinked = content,
      isDescription = content,
      isThumbnail = content;

    if (isTitled) {
      var title = share.content.title;
    } else {
      var title = "Custom title";
    }

    if (isLinked) {
      var link = share.content.shortenedUrl;
    } else {
      var link = "#";
    }

    if (isDescription) {
      var description = isDescription.description;
    } else {
      var description = "No description";
    }

    if (isThumbnail) {
      var thumbnailUrl = share.content.thumbnailUrl;
    } else {
      var thumbnailUrl = "http://placehold.it/60x60";
    }

    if (share) {
      var content = "<a target='_blank' href=" + link + ">" + title + "</a><br>" + description;
      div.innerHTML += "<li><img src='" + thumbnailUrl + "' alt=''>" + content + "</li>";
    }
    console.log(share);
  }

  div.innerHTML += "</ul>";
}
</script>

它生成这个 html:

<div id="displayUpdates">
    <ul></ul>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
</div>

我需要更改什么才能在 ul 中获取列表项？使用 jQuery 可以更轻松地完成此操作吗？

Answer 1

我会说这是一个正确的结果，因为您正在使用 innerHTML 替换现有内容，尽管您使用 += 附加到它，但是当您这样做时 div.innerHTML = "<ul>";浏览器看到有一个打开的 ul，当它找不到它的后代时，它会自动关闭它。

您应该仅在循环停止时使用 innerHTML：

function displayCompanyUpdates(result) {
  var div = document.getElementById("displayUpdates");

  var el = "<ul>"; // <----open a ul here

  var resValues = result.values;
  for (var i in resValues) {

    var share = resValues[i].updateContent.companyStatusUpdate.share;
    var content = share.content;
    var isTitled = content,
      isLinked = content,
      isDescription = content,
      isThumbnail = content;

    if (isTitled) {
      var title = share.content.title;
    } else {
      var title = "Custom title";
    }

    if (isLinked) {
      var link = share.content.shortenedUrl;
    } else {
      var link = "#";
    }

    if (isDescription) {
      var description = isDescription.description;
    } else {
      var description = "No description";
    }

    if (isThumbnail) {
      var thumbnailUrl = share.content.thumbnailUrl;
    } else {
      var thumbnailUrl = "http://placehold.it/60x60";
    }

    if (share) {
      var content = "<a target='_blank' href=" + link + ">" + title + "</a><br>" + description;
     el += "<li><img src='" + thumbnailUrl + "' alt=''>" + content + "</li>"; // add list items
    }
    console.log(share);
  }

  el += "</ul>"; /// <------close the ul here

  div.innerHTML = el; // <------here
}

Answer 2

如果你想在原始 Javascript 中这样做，你可以通过创建每个父元素并更改子元素的内部 HTML 来实现，例如：

var div = document.getElementById("displayUpdates");
var ul = document.createElement("ul");
var resValues = result.values;
for (var i in resValues) {
    var li = document.createElement("li");
    // populate innerHTML of "li"
    ul.appendChild(li);
}
div.appendChild(ul);

在 for 循环中添加 innerHTML 以生成列表

Adding innerHTML in for loop in order to generate a list

javascript

jquery

linkedin