我想按照下面的设置在其他子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

07-24 09:47
查看更多