我想按照下面的设置在其他子div中插入hr元素(父div中有2个子div)。 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>
最佳答案
insertBefore
要求reference元素是调用它的元素的直接子元素。你的线
document.body.insertBefore(new_hr, reference);
...告诉浏览器在
new_hr
直接包含的reference
元素之前插入document.body
。但是document.body
不直接包含引用元素,它位于div
内部。因此,您会得到一个错误,因为无法在要插入的元素内直接找到引用元素。您可以使用引用元素的父项来解决此问题:
reference.parentNode.insertBefore(new_hr, reference);
Live Example | Source