Question

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

Answer 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

使用createElement构建模态

1 个答案: