Javascript InsertBefore - 在父div中的不同div中

我想按照下面的設置在不同的子div中插入hr元素（父div中的2個子div）。 insertbefore方法適用於同一div內的元素，但不適用於其他子div中的元素（請參閱下面的代碼）。有沒有不同的方法可以用來實現這個目標，還是我想要不可能的？Javascript InsertBefore - 在父div中的不同div中

<body> 

<div id="whole section"> 

<div id="group_a"> 
<h3 id="event_1">Heading 1</h3>  
<p> some text </p> 

**// I would like to insert an hr element here** 

<h3 id="event_2">Heading 2</h3> 
<p> more text </p> 

</div> 

<div id="group_b"> 

**// I can only insert code here though** 

<script type="text/javascript"> 
function add_hr(){ 
    var new_hr = document.createElement('hr'); 
    var reference = document.getElementById('event_2'); 
    document.body.insertBefore(new_hr, reference); 
} 

window.onload = function(){add_hr();}; 

</script> 

</div> 
</div> 

</body>

來源

2013-02-25 Ronelz

insertBefore要求參考要素要在其上稱之爲元素的直接孩子。你行

document.body.insertBefore(new_hr, reference);

...告訴瀏覽器通過document.body直接包含在reference元素之前插入new_hr。但是document.body不是直接包含參考元素，它在div內。所以你會得到一個錯誤，因爲在你要插入的元素中找不到參考元素直接。

您可以通過使用參考元素的父修復：

reference.parentNode.insertBefore(new_hr, reference);

Live Example | Source

來源

2013-02-25 23:08:40

你當然是對的。不幸的是，事實證明，我無法弄清楚如何進行這項工作的真正原因是因爲有問題的parentNode將contentEditable設置爲false。無論如何，抱歉，我不能向你投票，我仍然缺乏要點。 – Ronelz 2013-02-26 13:54:31

@Ronelz：我的例子的父節點也有'contentEditable'設置爲'false'（因爲'false'是默認的）。你確定這是什麼錯誤？ – 2013-02-26 14:07:05

合理確定。準確地說 - contentEditable = inherit和iscontenteditable = false。我將相關代碼複製到W3schools的TryIt編輯器中，它工作得很好，但實際頁面上仍然沒有任何反應。我一直在玩js，看是否可以將contentEditable更改爲true，但目前還沒有運氣 - 它似乎是從我無法訪問的父站點繼承該屬性。 – Ronelz 2013-02-27 11:11:49

Javascript InsertBefore - 在父div中的不同div中

回答

相關問題