js - appendChild Method spoiling the whole page

Question

I am making a simple web app. In one part of it, I have a dynamically generated list:

which is achieved with:

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

And I have a jQuery function executed when any item on the list is clicked, to app a Calendar below it.

which is achieved with:

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

Anyhow, I am getting a very shabby output:

What's wrong? What should I do? How do I make the pre-existing elements(all made dynamically) to make way for the newly created ones?

Answer 1

Generate the whole content at once and not in parts. Hide the content that you do not want on initialization of the page. Write a function to show the hidden content when the list items are clicked.

Answer 2

Paragraph ("p" element) is for organization of information into paragraphs.

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

I suppose you should try to use div instead of p

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