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），而不是父文件，这是一篇文章。

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;

使用javascript附加文章和部分

1 个答案: