admin管理员组

文章数量:1325505

I would like to insert an hr element in a different child div (2 child divs within a parent div), as per the set-up below. The insertbefore method works fine for an element within the same div but not for elements in the other child div (see code below). Is there a different method I can use to achieve this or do I want the impossible?

<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>

I would like to insert an hr element in a different child div (2 child divs within a parent div), as per the set-up below. The insertbefore method works fine for an element within the same div but not for elements in the other child div (see code below). Is there a different method I can use to achieve this or do I want the impossible?

<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>
  • javascript
Share Improve this question asked Feb 25, 2013 at 23:02 RonelzRonelz 3031 gold badge4 silver badges8 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 7

insertBefore requires that the reference element be a direct child of the element on which you call it. Your line

document.body.insertBefore(new_hr, reference);

...tells the browser to insert new_hr before the reference element directly contained by document.body. But document.body doesn't directly contain the reference element, it's inside a div. So you get an error, because the reference element can't be found directly inside the element you're inserting into.

You can fix that by using the reference element's parent:

reference.parentNode.insertBefore(new_hr, reference);

Live Example | Source

本文标签： Javascript InsertBeforein a different div both within a parent divStack Overflow

版权声明：本文标题：Javascript InsertBefore - in a different div both within a parent div - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742197168a2431289.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。