使用Javascript将一个元素附加到DOM中-不能针对正确的DIV吗？

我正在尝试学习如何使用Javascript创建动态菜单

在onload中，程序将根据页面中的h2标题创建菜单

如果body标签的id=homePage，菜单将插入页面顶部，否则将在页面侧面插入菜单

它一直在工作，直到我在内容周围添加了一个DIV wrapperid=wrapper。然后它停止了工作

错误：未捕获DomeException:未能在“节点”上执行“insertBefore”：要在其之前插入新节点的节点不是此节点的子节点

我认为这是因为我的if/else语句将错误的元素作为父元素。但是我不知道如何以id=wrapper的DIV为目标，并在元素firstChild之前插入菜单

我卡住了

如果我注释掉DIV id=wrapper，那么它就工作了

HTML:

代码：

---

如果需要选择div，它应该是：

document.getElementById('wrapper')

所以如果我得到了你想要的，我想你应该：

if(pageIs == 'homePage'){

    //IF is homePage then load menu at top
    document.body.insertBefore(makeMenuDiv(),
        document.getElementById('wrapper').firstChild);                                   
}

---

问题来自于

makeMenuUl()

其中的最后一个功能是

document.body.insertBefore(anchor, headings[i]);

当你用一个div把所有的东西都包装在body中时，标题[i]不再是body的子元素——因此是错误的。把那行改成

document.getElementById('wrapper').insertBefore(anchor, headings[i]);

---

这对我来说很有效。

好的，我终于让它起作用了。以下是更新的代码笔：

我必须改变两件事：

1在IF/ELSE语句中，我必须更改选择DOM元素的方式，因为1页主页没有包装div，而另一页有包装div：

        if (pageIs == 'homePage') {

        //IF is homePage then load menu at top
        document.body.insertBefore(makeMenuDiv(), document.body.childNodes[0]);

    } else {

        //NOT homePage then load side menu

        var wrapper = document.getElementById('wrapper');

        wrapper.insertBefore(makeMenuDiv(), wrapper.childNodes[0]);

    } //END IF

2在for循环中，当将锚定标记附加到h2标题的前面时，我必须再次更改选择h2标题的方式，因为包装器使document.body.insertBefore不正确

        //10. insert the anchor in the the document next to each <h2>
        //document.body.insertBefore(anchor, headings[i]);
        document.getElementsByTagName('h2')[i].insertBefore(anchor, document.getElementsByTagName('h2')[i].firstChild);

---

只是不给我打印任何页面。没有错误。我建议您使用Vue、React或Angular来构建动态html@LucasMarques在不知道OP真正需要什么的情况下，这不是一种可以轻易给出的建议。如果没有令人信服的理由，你就不会把库扔向这个问题。@LucasMarques：说真的，不会。把库扔向任何东西都是没有必要的。现在创建动态内容绝对是件小事；为什么身份证上有一个密码？无论哪种方式，设置属性都要干净得多。menu.id=main菜单

        if (pageIs == 'homePage') {

        //IF is homePage then load menu at top
        document.body.insertBefore(makeMenuDiv(), document.body.childNodes[0]);

    } else {

        //NOT homePage then load side menu

        var wrapper = document.getElementById('wrapper');

        wrapper.insertBefore(makeMenuDiv(), wrapper.childNodes[0]);

    } //END IF

        //10. insert the anchor in the the document next to each <h2>
        //document.body.insertBefore(anchor, headings[i]);
        document.getElementsByTagName('h2')[i].insertBefore(anchor, document.getElementsByTagName('h2')[i].firstChild);