Question

我试图学习如何使用Javascript制作动态菜单。

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

如果body标签有id = homePage，则菜单将插入页面顶部，否则它将在页面侧面插入一个菜单。

它正在工作，直到我在内容周围添加了DIV包装器（id =包装器）。然后它停止了工作。

错误：未捕获的DOMException：无法执行＆＃39; insertBefore＆＃39; on＆＃39;节点＆＃39;：插入新节点的节点不是该节点的子节点。

我认为这是因为我的if / else语句我将错误的元素作为父元素。但我无法弄清楚如何使用id = wrapper来定位DIV，并在该元素firstChild之前插入菜单。

我被卡住了！

如果我注释掉DIV id = wrapper那么它就可以了。

HTML：

<body id ='notHomePage'>

  <!--<div id='wrapper'>-->
    <h1>Heading 1</h1>

    <h2>H2 Heading - 1</h2>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum ullamcorper
    </p>

    <h2>H2 Heading - 2</h2>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam fermentum ullamcorper
    </p>

    <h2>H2 Heading - 3</h2>

    <p>
      Lorem ipsum dolor sit amet, consectetur
    </p>

 <!-- </div> -->

</body>

JS：

    if(pageIs == 'homePage'){

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


       } else {

        //ELSE load SIDE NAV
        document.body.insertBefore(makeSideNav(), document.body.firstChild);


       }//END IF

CODE： Codepen

Answer 1

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

public markerZoom(){
    this.markers.forEach((i) => i.isOpen = false); //closes any opened infowindows
    this.currentMarker.isOpen = true;
....
}

因此，如果我得到你想要的东西，我认为你应该只需要：

document.getElementById('wrapper')

Answer 2

问题来自

makeMenuUl()

其中的最后一项功能是

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

当你用div包裹身体的所有东西时，标题[i]不再是身体的孩子 - 因此错误。将该行更改为

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

它适用于我。

Answer 3

好的，我终于有了这个工作。这是更新的CodePen：

CODEPEN

我必须改变两件事：

1）在我的IF / ELSE语句中，我不得不改变我选择DOM元素的方式，因为1页（homePage）没有包装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);

使用Javascript将元素附加到DOM - 无法定位正确的DIV？

3 个答案: