JavaScript createElement help

Question

Hi, I have the following code:

function JS_Utils_BuildModal ()
        {

            var objModal = document.createElement("div");

            objModal.setAttribute('id', 'Modal');

            document.body.appendChild(objModal);

        }

What I want to do is add to it and create a series of DIVS and P's with some content so that when I run the function I get the following:

<div id="Modal">
<div class="Content">
<p>Sending Data</p>
</div>
</div>

Thanks

Answer 1

Really it's just a matter of duplicating the createElement and appendChild parts of your code, and then setting the relevant properties on the other objects:

function JS_Utils_BuildModal () 
{ 
    var objModal   = document.createElement("div"); 
    var objContent = document.createElement("div");
    var objP       = document.createElement("p");
    objModal.setAttribute('id', 'Modal');
    objContent.className = 'Content';
    objP.innerText = "Sending Data";
    objModal.appendChild(objContent);
    objContent.appendChild(objP); 
    document.body.appendChild(objModal); 
} 

Alternatively, you could do the whole thing/part of it with the innerHTML property, like so:

function JS_Utils_BuildModal () 
{ 
    var objModal   = document.createElement("div");
    objModal.setAttribute('id', 'Modal');
    objModal.innerHTML = '<div class="Content"><p>Sending Data</p></div>';
    document.body.appendChild(objModal); 
}

Using innerHTML is generally slower than directly manipulating the DOM, because it invokes the HTML parser. It's still fast enough in most cases, though.

Answer 2

function JS_Utils_BuildModal()
{
    // Create parent div
    var objModal = document.createElement("div");
    objModal.setAttribute('id', 'Modal');
    document.body.appendChild(objModal);

    // Create modal div
    var objContent = document.createElement("div");
    objContent.setAttribute("id", "Content");
    objModal.appendChild(objContent);

    // Create sending data paragraph
    var objData = document.createElement("p");
    objContent.appendChild(objData);
}

The appendChild() method will work on any DOM element. document.body is a DOM element for the document's body.

Edit: Looks like Andy E already answered the question correctly.

Answer 3

about innerhtml, it is actually faster than dom: http://www.quirksmode.org/dom/innerhtml.html