js - appendChild方法破坏了整个页面

Question

我正在制作一个简单的网络应用。在其中的一部分中，我有一个动态生成的列表：

通过以下方式实现：

for(var i=0; i<goalsObj.length; i++){
    var node = document.createElement("li");
    node.setAttribute("class", "list");
    node.setAttribute('id','g'+i);
    var checkbox = document.createElement("input");
    checkbox.setAttribute("type","checkbox");
    checkbox.setAttribute("class", "tickbox");
    node.appendChild(checkbox);
    var textnode = document.createTextNode(goalsObj[i]);
    node.appendChild(textnode);              
    document.getElementById("sortable").appendChild(node);  
    }

当点击列表中的任何项目时，我会执行jQuery函数，以便在其下方的日历中应用。

通过以下方式实现：

var cal = document.createElement("p");
    cal.innerHTML=calendar_html;    
    document.getElementById($(this).attr('id')).appendChild(cal);

无论如何，我的输出非常简陋：

怎么了？我该怎么办？如何使预先存在的元素（全部动态制作）为新创建的元素让路？

Answer 1

立即生成整个内容，而不是部分生成。隐藏页面初始化时不需要的内容。编写一个函数，在单击列表项时显示隐藏的内容。

Answer 2

段落（“p”元素）用于将信息组织成段落。

http://www.w3.org/TR/html401/struct/text.html#h-9.3

我想你应该尝试使用div而不是p

var cal = document.createElement("div");
cal.innerHTML=calendar_html;