Rendering elements (which can change numbers) using jQuery
First off: It's invalid HTML to have a div directly inside an ul element. Any special reason you need the &lt;div class="tagsend"&gt;&lt;/div&gt;? Modern CSS techniques usually don't need additional elements like that.



You shouldn't repeatedly call the getter methods in a loop like that. If they do more work than just returning an array, then it's wasted performance. 

let notFoundNodes = graphFactory.getNotFoundNodes();
for (let x = 0; x &lt; notFoundNodes.length; x++) {
  htmlNodes = htmlNodes + '&lt;li&gt;&lt;a class="notfound" href="#"&gt;' + notFoundNodes[x] + '&lt;/a&gt;&lt;/li&gt;';
}


Or, considering you are using let which is part of ECMAScript 2015, you could alternatively use a for ... of loop:

for (let notFoundNode of graphFactory.getNotFoundNodes()) {
  htmlNodes = htmlNodes + '&lt;li&gt;&lt;a class="notfound" href="#"&gt;' + notFoundNode + '&lt;/a&gt;&lt;/li&gt;';
}




Concatenating strings in loops are also quite a wasteful operation, because they cannot be optimized by the runtime environment. A better way is to collect the strings in an array, and then joining them together at the end:

var htmlNodes = ['&lt;ul class="tags"&gt;'];

// ...

for (let notFoundNode of graphFactory.getNotFoundNodes()) {
  htmlNodes.push('&lt;li&gt;&lt;a class="notfound" href="#"&gt;' + notFoundNode + '&lt;/a&gt;&lt;/li&gt;');
}

// ...

htmlNodes.push('&lt;/ul&gt;');
$('#pinnednodeslist').html(htmlNode.join(''));




In order to avoid mixing the HTML you could use a template engine. There are literally dozens out there, with many pros and cons, which can make the choice a bit overwhelming. For an example I'll use Handlebars.js:

The template is placed inside a script element somewhere in your HTML:

&lt;script id="tags-template" type="text/x-handlebars-template"&gt;
  &lt;ul class="tags"&gt;
    {{#each notFoundNodes}}
      &lt;li&gt;&lt;a class="notfound" href="#"&gt;{{this}}&lt;/a&gt;&lt;/li&gt;
    {{/each}}
    {{#each pinnedNodes}}
      &lt;li&gt;&lt;a href="#"&gt;{{this}}&lt;/a&gt;&lt;/li&gt;
    {{/each}}
  &lt;/ul&gt;
&lt;/script&gt;


Once during page initialization you compile the template:

var source = document.getElementById("tags-template").innerHTML;
var tagsTemplate = Handlebars.compile(source); 


And then later you can repeatedly use the compiled template to render the data:

var context = {
   notFoundNodes: graphFactory.getNotFoundNodes(),
   pinnedNodes: graphFactory.getPinnedNodes()
};
var html = tagsTemplate(context);
$('#pinnednodeslist').html(html);


EDIT: BTW, nothing in this (or your original code) really requires jQuery. The last line could simply replaced with:

document.getElementById('pinnednodeslist').innerHtml = html;




The next step could be to use more advanced library such as React, Vue.js or Angular. These are frameworks that not only render the data with a template engine, but also can (among other things) react to changes in the data and re-render automatically when even needed. This however requires learning a bit of a different way of programming.



Finally, if the data displayed is coming from the server (via AJAX for example), then you could consider having the server render the HTML instead of sending the raw data.