1

以下の設定に従って、hr要素を別の子div（親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>
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 に答える