使用 createElement 构建模态答案

【问题标题】：Build Modal with createElement使用 createElement 构建模态
【发布时间】：2014-05-19 21:39:14
【问题描述】：

对于我正在做的一个小项目，我有兴趣使用 JavaScript 的 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) 到最外面的元素 (form) 构建表格，然后将它们附加到 Modal。当我使用上面的代码时，只有最里面的元素 (a) 被附加到正文中。如果有人能帮助指出我做错了什么（我可能误用了 createElement 或 appendChild）或者我如何修复它以生成上面列出的正确 HTML 结构，我将不胜感激。

【问题讨论】：

标签： javascript jquery html appendchild createelement

【解决方案1】：

这基本上没问题 - 问题是您正在用附加节点覆盖现有节点。这就是发生这种情况的原因。

appendChild(...) 方法返回刚刚添加的 DOM 元素。所以，当你调用 qtHead = qtHead.appendChild(qtHeading)，那么

qtHeading 被附加到 qtHead
qtHead.appendChild(qtHeading) 返回对 qtHeading 的引用
qtHead 被 qtHeading 覆盖

所以，要解决这个问题，只需采取以下措施：

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

改写成这样：

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

【讨论】：