javascript - 使用 javascript 附加文章和部分

Question

我正在使用 AJAX 来显示帖子，我试图从返回的 JSON 对象中获取每个属性并创建 <article>从标题开始，然后是后续的 <section>从内容来看。我可以将标题添加到页面中，但是我不确定如何在同一个 for 循环中添加该部分。

JS:

function loadBlog(xhr) {
    var mainText = document.querySelector('.main-text');
    var result = JSON.parse(xhr.responseText);
    for(var i = 0; i < countObject(result); i++) {
        var title =  document.createElement('article').appendChild(document.createTextNode(result[i].title));
        var data = document.createElement('section').appendChild(document.createTextNode(result[i].content));
        var output = mainText.appendChild(title)
    }
}

Answer 1

您的问题是 .appendChild 返回子项(它是一个 TextNode)，而不是父项(它是一个 Article)。

var article = document.createElement("article"),
    title   = document.createElement("h1"),
    titleText = document.createTextNode(result[i].title),
    content = document.createElement("section"),
    contentText = document.createTextNode(result[i].content);

title.appendChild(titleText);
content.appendChild(contentText);
article.appendChild(title);
article.appendChild(content);

如果您真的想将它们链接在一起，那么您可以执行以下操作:

var article = document.createElement("article")
                  .appendChild(document.createElement("h1"))
                      .appendChild(document.createTextNode(result[i].title))
                  .parentNode.parentNode // out of the textNode, out of the H1
                  .appendChild(document.createElement("section"))
                      .appendChild(document.createTextNode(result[i].content))
                  // now you have to go up, out of the article-text
                  // and up out of the Section, to get back to the Article
                  .parentNode.parentNode;