[英]Attach an Element to the DOM using Javascript - Can't target the correct DIV?
我正在嘗試學習如何使用 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
代碼：代碼筆
如果您需要選擇 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 中時，headings[i] 不再是 body 的子元素——因此出現錯誤。 將該行更改為
document.getElementById('wrapper').insertBefore(anchor, headings[i]);
它對我有用。
好的，我終於讓這個工作了。 這是更新的 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);
我們可以在加載DOM之前將腳本元素標簽附加到文檔對象嗎？ 使用JavaScript
[英]Can we attach a script element tag to document object before DOM gets loaded? using javascript
如何使用Jquery或Javascript定位Appended元素，或者如何將該附加元素添加到DOM？
[英]How can I either target an Appended element using Jquery or Javascript, or how can I add that appened element to the DOM?
我們可以使用簡單的javascript，DOM和CSS在svg元素的鼠標懸停上創建div以具有多行工具提示嗎？
[英]can we create div on mousehover of svg element to have multi line tooltip using simple javascript, DOM and css?
使用 Javascript 創建和刪除/銷毀 DOM 元素的正確方法
[英]Correct way to create and remove/destroy DOM element using Javascript
使用addthis或外部javascript更新聚合物元素陰影dom中的div
[英]Using addthis or external javascript to update div in polymer element shadow dom
為什么我不能在html dom上使用javascript向我的div添加寬度和高度
[英]Why can't I add width and height to my div using javascript on html dom
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.