- ベストアンサー
要素を指定の場所に追加する方法
- 要素を指定の場所に追加する方法について教えてください。
- 現在の状態では、追加する要素が指定した場所の中に追加されてしまいます。
- 実現したい形にするためには、appendChildメソッドを使用して追加する要素を指定の場所に直接追加する必要があります。
- bakenshibakenshi
- お礼率81% (115/141)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
function addBefore(id){ var dummy = document.createElement ("SPAN"); var str = document.createTextNode("ダミー"); dummy.appendChild(str); document.getElementById('top').insertBefore(dummy, document.getElementById(id)); } ---------------------------------------------------------------- top.insertBefore(dummy, id); top の中のid の前に挿入する
その他の回答 (1)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
#1>addを呼ぶ引数にid_2を指定すれば希望した形で出力されます。 (id_2もあるし）そのつもりでした。説明不足でしたね。 #1>insertBeforeの逆の形でinsertAfterのようなものがあればよいのですが・・・、何かないものでしょうか？ ＩＥの場合は、まさにそういうメソッド(insertAdjacentElement) があるのですが、標準的なメソッドではないので、よろしくないです。 ただ、id で示されるエレメントの次のエレメントというのは、捕らえることができますので、次のように書くことができます。 function addAfter(id){ var dummy = document.createElement ("SPAN"); var str = document.createTextNode("ダミー"); dummy.appendChild(str); var nextEl = document.getElementById(id).nextSibling; document.getElementById('top').insertBefore(dummy, nextEl); }
お礼
BLUEPIXY様、ご教授有難うございます。 出来ました。 nextSiblingなんてものがあったなんて、まったく勉強不足です。
補足
BLUEPIXY様、ご教授有難うございます。 insertBeforeですと指定要素の前に挿入するので 以下の形で出力されます。 <span>ダミー</span> <div id="id_1">ほげ１</div> <div id="id_2">ほげ２</div> と言っても、addを呼ぶ引数にid_2を指定すれば希望した形で出力されます。 が、引数はid_1で指定したい(というか実際はid_1しか取れない。。。)ので insertBeforeの逆の形でinsertAfterのようなものが あればよいのですが・・・、何かないものでしょうか？ ご教授いただいて修正したソース <HTML> <HEAD> <script type="text/javascript"> function add(id){ var dummy = document.createElement ("SPAN"); var str = document.createTextNode("ダミー"); dummy.appendChild(str); document.getElementById('top').insertBefore(dummy, document.getElementById(id)); } </script> </HEAD> <BODY> <div id="top"> <div id="id_1">ほげ１</div> <div id="id_2">ほげ２</div> </div> <br><br> <input type="button" value=copy onClick="add('id_1')"> </BODY> </HTML>