使用 createElement 构建模态

对于我正在做的一个小项目，我有兴趣使用 JavaScripts createElement 函数创建一个小的模态形式。我已经布置了 HTML 并实际用 JS 构建了代码，但遗憾的是似乎无法正确添加所有内容。

HTML 应该看起来像这样：

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

我设置的 JavaScript 用于执行此操作并将其附加到正文中如下所示：

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

我的逻辑是我们首先要通过一次附加一个来将标题和关闭按钮添加到 head 元素。然后，我将把头部附加到实际的模态元素。接下来，我将开始从最里面的元素（a）到最外面的元素（形式）构建表格，然后将它们附加到模态中。当我使用上面的代码时，只有最里面的元素 （a） 被附加到主体中。如果有人可以帮助指出我做错了什么（我可能滥用了createElement或appendChild）或如何修复它以生成上面列出的正确的HTML结构，我将不胜感激。