javascript - 无法将Child 附加到文章中

Question

我正在尝试从 Restful api 获取内容并将其附加到 html 文件，但不知何故未创建新的文章标签。主标记存在，并且确认响应内容实际包含值。有什么想法为什么这段代码不起作用吗？

xmlhttp.onreadystatechange = function(){
    if(this.readyState == 4 && this.status == 200){
        responseArray = JSON.parse(this.responseText);      
        var anchorElement = document.getElementsByTagName("main")[0];       

        for(var index = 0; index < responseArray.length; index++){
             //tried replacing appendChild with += as well
             anchorElement.appendChild(createLayout(responseArray[index]));
        }       
    }
}


function createLayout(responseContent){
    console.log(responseContent);
    var article = document.createElement("article");    

    var header = document.createElement("header"), h4 = 
    document.createElement("h4");
    //header.textContent = responseContent.title;
    h4.textContent = "Title of event";
    header.appendChild(h4);

    var paragraph = document.createElement("p");
    paragraph.textContent = responseContent.date + " " + responseContent.time;
    console.log("article: " + article);

    return article;

}

Answer 1

您忘记将创建的 h4 和 p 附加到文章中

function createLayout(responseContent){
    console.log(responseContent);
    var article = document.createElement("article");    

    var header = document.createElement("header"), h4 = 
    document.createElement("h4");
    //header.textContent = responseContent.title;
    h4.textContent = "Title of event";
    header.appendChild(h4);

    var paragraph = document.createElement("p");
    paragraph.textContent = responseContent.date + " " + responseContent.time;
    console.log("article: " + article);
    // missing
    article.appendChild(h4);
    article.appendChild(paragraph);
    // __________
    return article;
}

按照你现在的方式，你的函数只返回创建的 article 元素 - 基本上就像

function createLayout(responseContent) {
    return document.createElement("article"); 
}