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

【问题标题】：Attach an Element to the DOM using Javascript - Can't target the correct DIV?使用 Javascript 将元素附加到 DOM - 无法定位正确的 DIV？
【发布时间】：2018-07-13 05:33:45
【问题描述】：

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

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

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

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

错误：未捕获的 DOMException：无法在 'Node' 上执行 'insertBefore'：要插入新节点的节点不是该节点的子节点。

我认为这是因为我的 if/else 语句将错误的元素定位为父元素。但我不知道如何使用 id = 包装器定位 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

代码： Codepen

【问题讨论】：

只为我打印"notHomePage"。没有错误。
我推荐你使用 Vue、React 或 Angular 来构建动态 html
@LucasMarques 在不知道 OP 实际需要什么的情况下，这不是随便给出的建议。如果没有令人信服的理由，您不会将库扔给问题。
@LucasMarques：说真的，不。没有必要在任何事情上都扔图书馆。如今，创建动态内容绝对是微不足道的。
menu.setAttribute("id", "#mainMenu"); 为什么ID有#？无论哪种方式，设置属性都更清洁。 menu.id = "mainMenu"

标签： javascript html dom

【解决方案1】：

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

document.getElementById('wrapper')

所以如果我得到你想要的，我认为你应该只需要：

if(pageIs == 'homePage'){

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

【讨论】：

【解决方案2】：

问题出在

makeMenuUl()

其中的最后一个函数是

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

当你用 div 包裹正文中的所有内容时，标题 [i] 不再是正文的孩子——因此出现错误。将该行更改为

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

它对我有用。

【讨论】：

【解决方案3】：

好的，我终于让它工作了。这是更新后的 CodePen：

CODEPEN

我必须改变的两件事：

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

【讨论】：