1

根据下面的设置，我想在不同的子 div（父 div 中的 2 个子 div）中插入一个 hr 元素。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>
4

1 回答 1

6

insertBefore要求引用元素是调用它的元素的直接子元素。你的线路

document.body.insertBefore(new_hr, reference);

...告诉浏览器在 .直接包含new_hr的元素之前插入。但不直接包含引用元素，它在一个. 所以你得到一个错误，因为引用元素不能直接在你插入的元素中找到。referencedocument.bodydocument.body div

您可以通过使用参考元素的父级来解决此问题：

reference.parentNode.insertBefore(new_hr, reference);

实例| 资源

于 2013-02-25T23:08:40.653 回答