Outputting data from an AJAX call to HTML

Question

I'm using AJAX to add more articles to a list of articles when you press a button. So my AJAX call returns data that includes a title, author and 1 to 3 images associated with the article. Below is the code I'm using to output it, but it feels VERY clunky.

What are the best practices for printing out HTML with JavaScript/jQuery in a scenario like this where I need to add many new tags with new information? Thanks for the help!

Also, I know some of the code isn't super well written because it's a first draft just to make stuff work, so please only answer this question with regards to printing out the HTML or things that will make printing the HTML easier

$j.getJSON(ajaxurl, {action: 'load_articles', issues: $issues}, function(data) {
    if (data.message != null) {
        alert(data.message);
        return
    }
    list = $j('.all-articles ul');
    for (i in data.articles) {
        article = data.articles[i];
        //Hides articles already on page
        if ($j("#" + article.id).size() === 0) {
            list.append('<li class="article-preview" id="' + article.id + '">' +
                    '<h3 class="article-headline">' + article.title + '</h3>' +
                    '</li>');
            current = $j("#" + article.id)
            current.append('<p class="authors"></p>');
            authors = $j("#" + article.id + " .authors")
            for (a in article.authors) {
                authors.append(article.authors[a].data.display_name + " ");
            }
            current.append('<div class="images"></div>');
            images = $j("#" + article.id + " .images")
            for (i in article.image) {
                text = "<div class='image-expand-container'>";
                if (i == 0) {
                    text += ('<img id="' + article.image[i].id + '"class="selected" src="' + article.image[i].medium + '"></img>');
                }
                else {
                    text += ('<img id="' + article.image[i].id + '" src="' + article.image[i].medium + '"></img>');
                }
                text += '<div class="dashicons dashicons-editor-expand"></div></div>';
                images.append(text);
            }
        }
    }

Answer 1

There are a few approaches you can take.

1. As you're doing here, you can return data from your ajax call (eg as JSON) and then use a javascript function to generate the corresponding HTML by building strings. This, as you're finding, is often messy.
2. You can generate the actual HTML on the server side, and have the ajax call return an HTML fragment, which you insert into your DOM. This has the advantage that, if some of your HTML is loading when the page loads, and some is loading via ajax, you can use the same approach (PHP, XSLT, ASP.NET Razor, any kind of server-side templating) to generate all of the HTML.
3. You can use a javascript templating framework to turn your JSON data into HTML. If all of your HTML is being generated via javascript (eg in a single-page application) this may be your best bet.