Build Modal with createElement

Question

For a little project I am doing I am interested in creating a small modal form using JavaScripts createElement function. I have the HTML laid out and have actually built the code in JS but sadly cannot seem to get everything to add correctly.

The HTML is supposed to look like this:

<div id="qtModal">
    <div id="qtHead">
        <span id="qtHeading">Quick Tools</span>
        <span id="qtClose">X</span>
    </div>
    <table id="qtWrapper" border="1">
        <tr>
            <td id="qtRail">
                <ul>
                    <li><a class="qtLink" href="#">Delete</a></li>      
                </ul>
            </td>
        </tr>
    </table>
</div>

The JavaScript I set up to make this and append it to the body is as follows:

var qtModal = document.createElement("div");
    qtModal.setAttribute("id", "qtModal");

var qtHead = document.createElement("qtHead");
    qtHead.setAttribute("id", "qtHead");

var qtHeading = document.createElement("span");
    qtHeading.setAttribute("id", "qtHeading");
    qtHeading.textContent = "Quick Tools";

var qtClose = document.createElement("span");
    qtClose.setAttribute("id", "qtClose");
    qtClose.textContent = "X";

var qtWrapper = document.createElement("table");
    qtWrapper.setAttribute("id", "qtWrapper");
    qtWrapper.setAttribute("border", "1");

var qtTr = document.createElement("tr");

var qtRail = document.createElement("td");
    qtRail.setAttribute("id", "qtRail");

var qtUl = document.createElement("ul");

var qtLi1 = document.createElement("li");

var qtA1 = document.createElement("a");
    qtA1.setAttribute("class", "qtLink");
    qtA1.setAttribute("href", "#");

//We want to build the modal head right here
qtHead = qtHead.appendChild(qtHeading);
qtHead = qtHead.appendChild(qtClose);
qtModal = qtModal.appendChild(qtHead); //Add to modal

//Build the table from the inner most element up to the top
qtLi1 = qtLi1.appendChild(qtA1);
qtUl = qtUl.appendChild(qtLi1);
qtRail = qtRail.appendChild(qtUl);
qtTr = qtTr.appendChild(qtUl);
qtWrapper = qtWrapper.appendChild(qtTr);
qtModal = qtModal.appendChild(qtWrapper); //Add to modal

$("body").append(qtModal); //Add to body

My logic is the we first want to add the heading and the close button to the head element by appending them one at a time. I will then append the head to the actual modal element. Next up I will start building the table from the innermost element (a) up to the outermost element (form) then append those to the Modal. When I use the code above only the innermost element (a) gets appended to the body. I would appreciate it if someone could help either point out what I am doing wrong (I might be misusing createElement or appendChild) or how I could fix it to generate the proper HTML structure listed above.

Answer 1

This is basically fine - the issue is that you're overwriting your existing nodes with your appended nodes. Here's why that's happening.

The appendChild(...) method returns the DOM element that was just appended. So, when you call qtHead = qtHead.appendChild(qtHeading), then

1. qtHeading gets appended to qtHead
2. qtHead.appendChild(qtHeading) returns a reference to qtHeading
3. qtHead gets overwritten with qtHeading

So, to fix this, just take this:

qtHead = qtHead.appendChild(qtHeading);
qtHead = qtHead.appendChild(qtClose);
qtModal = qtModal.appendChild(qtHead); //Add to modal

//Build the table from the inner most element up to the top
qtLi1 = qtLi1.appendChild(qtA1);
qtUl = qtUl.appendChild(qtLi1);
qtRail = qtRail.appendChild(qtUl);
qtTr = qtTr.appendChild(qtUl);
qtWrapper = qtWrapper.appendChild(qtTr);
qtModal = qtModal.appendChild(qtWrapper); //Add to modal

and rewrite it as this:

qtHead.appendChild(qtHeading);
qtHead.appendChild(qtClose);
qtModal.appendChild(qtHead); //Add to modal

//Build the table from the inner most element up to the top
qtLi1.appendChild(qtA1);
qtUl.appendChild(qtLi1);
qtRail.appendChild(qtUl);
qtTr.appendChild(qtUl);
qtWrapper.appendChild(qtTr);
qtModal.appendChild(qtWrapper); //Add to modal