从AJAX调用输出数据到HTML

我使用AJAX在按下按钮时将更多文章添加到文章列表中。因此，我的AJAX调用返回的数据包括标题、作者和与文章相关的1到3张图片。下面是我用来输出它的代码，但感觉很笨拙。

在这样的场景中，我需要添加许多带有新信息的新标签，用JavaScript/jQuery打印出HTML的最佳实践是什么?谢谢你的帮助!

另外，我知道有些代码写得不是很好，因为它只是一个初稿，只是为了让东西工作，所以请只回答这个问题，关于打印出HTML或事情将使打印HTML更容易

$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);
            }
        }
    }