Currently when the user selects some tags in my app I generate them in a function, like this:
// Show tags that are currently used in search
var htmlNodes = '<ul class="tags">';
// If no pinned nodes, reset not found nodes
if (graphFactory.existPinnedNodes() == false) {
graphFactory.updateNotFoundNodes();
}
// Add not found nodes as tags (gray)
for (let x = 0; x < graphFactory.getNotFoundNodes().length; x++) {
htmlNodes = htmlNodes + '<li><a class="notfound" href="#">' + graphFactory.getNotFoundNodes()[x] + '</a></li>';
}
// Add pinned nodes as tags (blue)
for (let q = 0; q < graphFactory.getPinnedNodes().length; q++) {
htmlNodes = htmlNodes + '<li><a href="#">' + graphFactory.getPinnedNodes()[q] + '</a></li>';
}
htmlNodes = htmlNodes + '<div class="tagsend"></div></ul>';
$('#pinnednodeslist').html(htmlNodes);
Basically I create a <ul> of class tags, add some li elements with a specific tag each, and then render it into the #pinnednodeslist element.
As you can see, the number of <li> elements might change, depending on the number of getPinnedNodes or getNotFoundNodes, so I wonder if I have to reconstruct this html every time or if there is a more efficient way to do that...
Maybe a better way is that I don't have to mix so much HTML with my code?
For instance, I was thinking to leave all the elements there and just make them invisible, simply adding a class to show them and the html content to display within... But maybe you know of some other better way to do that?