javascript - 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

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