Adding innerHTML in for loop in order to generate a list

Question

I working on a script to display a company's status updates via the LinkedIn api. The script works as such, but I can't make my generated list item appear inside <ul></ul> tags. Right now my code is this:

<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>

And it generates this html:

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

What do I need to change in order to get the list items inside the ul? Could this be done more easily with jQuery?

Answer 1

I would say that is a correct result as you are using innerHTML to replace the existing content, although you are appending to it with += but when you do this div.innerHTML = "<ul>"; browser sees that there is a opened ul and when it doesn't find it's descendants it automatically closes it.

You should use innerHTML only when the loop stops:

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
}