从AJAX调用输出数据到HTML

Question

按下按钮时，我正在使用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);
            }
        }
    }

Answer 1

您可以采取几种方法。

1. 当您在此处进行操作时，可以从ajax调用返回数据（例如，作为JSON），然后使用javascript函数通过构建字符串来生成相应的HTML。 正如您所发现的，这通常很混乱。
2. 您可以在服务器端生成实际的HTML，并让ajax调用返回一个HTML片段，并将其插入到DOM中。 这样做的好处是，如果某些HTML在页面加载时正在加载，而另一些通过ajax加载，则可以使用相同的方法（PHP，XSLT，ASP.NET Razor，任何类型的服务器端模板）来生成所有HTML。
3. 您可以使用JavaScript模板框架将JSON数据转换为HTML。 如果您所有的HTML都是通过javascript生成的（例如在单页应用程序中），那么这也许是最好的选择。