js - appendChild 方法破坏整个页面答案

【问题标题】：js - appendChild Method spoiling the whole pagejs - appendChild 方法破坏整个页面
【发布时间】：2013-12-25 10:28:29
【问题描述】：

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

通过以下方式实现：

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);

无论如何，我得到了一个非常破旧的输出：

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

【问题讨论】：

只使用jquery
@user1956570 我是 jquery 的新手，能不能有点特别。
为什么要使用 p 标签作为日历的容器？这是错误的！使用 div！
@Tony 它有什么不同？这是我的第一个网络应用！

标签： javascript jquery appendchild

【解决方案1】：

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

【讨论】：

【解决方案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;

【讨论】：

实际上，那行不通。一次生成全部内容而不是部分生成解决了这个问题。然后我可以使用 jQuery 隐藏和显示不同的元素。