无法将元素追加到 div

Question

我的 Javascript 旨在执行以下操作。

我有一个 parent div 有 6 children 个节点。我用 JS 创建了 3 个 div，然后将它们附加到 parent。然后我将原来的 6 children 个节点插入到我刚刚创建的 3 个 div 中并附加到原来的 parent。这 3 个 div 是原始 6 个元素的兄弟姐妹，现在是它们的 parent 个。

这几乎行得通。但是原来的两个children并没有像我在Javascript中那样附加到中间div。我不知道我做错了什么。下面是 Javascript，这里是执行脚本的网页的 link。

http://digitalenamel.com/espresso-event-schedule/

setTimeout( function() {
    try{
        var calendar = document.getElementById('calendar');
        var calendarChildren = calendar.children;
        console.log("How many children does #calendar have? " + calendarChildren.length);
        var calendarHeaders = document.getElementsByClassName('fc-header');  
        var calendarBodies = document.getElementsByClassName('fc-content');
        var containerForCalendars1 = document.createElement("div");
        var containerForCalendars2 = document.createElement("div");
        var containerForCalendars3 = document.createElement("div");
        calendar.appendChild(containerForCalendars1);
        calendar.appendChild(containerForCalendars2);
        calendar.appendChild(containerForCalendars3);
        containerForCalendars1.appendChild(calendarHeaders[0]); 
        containerForCalendars1.appendChild(calendarBodies[0]);
        containerForCalendars2.appendChild(calendarHeaders[1]);
        containerForCalendars2.appendChild(calendarBodies[1]);
        containerForCalendars3.appendChild(calendarHeaders[2]);
        containerForCalendars3.appendChild(calendarBodies[2]);
        console.log("How many elements with the class of fc-header are inside the calendarHeaders array? " + calendarHeaders.length);
        console.log("How many elements with the class of fc-content are inside the calendarBodies array? " + calendarHeaders.length);
    }catch(err){
        console.log("There was a general error with JS for calendar.");
    }
}, 8000);

编辑：http://jsfiddle.net/xe1ssxeu/ 重现错误

Answer 1

使用您更新后的问题，我进行了尝试。正如我所说，我已经避开了你的方法，它有点过头了。您在 JSFiddle 中启用了 jQuery，所以我使用了它。

正如你提到的，你正在学习我已经包含了一些应该解释发生了什么的评论。

// Set this jQuery to run once the page is ready.
$('document').ready(function() {
    // Create a list of all the headers & all the contents
    var headers = $('.fc-header');
    var contents = $('.fc-content');

    // Cycle through the headers & contents (assuming they're equal in length)
    for(i=0; i<headers.length; i++) {

        // Add a div to calendar with an id of the for iterator so we can 
        // access it.
        $('#calendar').append('<div id="' + i + '"></div>');

        // Access that div using the id we added, then append the i'th header
        // and the i'th content.
        $('#' + i).append(headers[i]);
        $('#' + i).append(contents[i]);

        // Remove the id as we don't need it later.
        $('#' + i).removeAttr('id');
    }
})

JSFiddle

无法将元素追加到 div

Can not append elements to div

html

javascript

append