要素を指定の場所に追加する方法

前へ 次へ
このQ&Aのポイント
  • 要素を指定の場所に追加する方法について教えてください。
  • 現在の状態では、追加する要素が指定した場所の中に追加されてしまいます。
  • 実現したい形にするためには、appendChildメソッドを使用して追加する要素を指定の場所に直接追加する必要があります。
回答を見る
  • ベストアンサー

要素を指定の場所に追加

お世話になります。 createElementした要素を指定の場所に追加したいのですが どのようにすればよろしいでしょうか？ <HTML> <HEAD> <script type="text/javascript"> function add(id){ var dummy = document.createElement ("SPAN"); var str = document.createTextNode("ダミー"); dummy.appendChild(str); document.getElementById(id).appendChild ( dummy ); } </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> ・appendChild前 <div id="id_1">ほげ１</div> <div id="id_2">ほげ２</div> ・実現したい形 appendChild後(id_1の後に追加する。) <div id="id_1">ほげ１</div> <span>ダミー</span> <div id="id_2">ほげ２</div> ・現状(id_1のdivの中に追加される。) <div id="id_1">ほげ１ <span>ダミー</span></div> <div id="id_2">ほげ２</div> もしかしたらすごく簡単なことなのかもしれませんが、 ご教授よろしくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

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 の前に挿入する

bakenshibakenshi
質問者

補足

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>

その他の回答 (1)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

#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); }

bakenshibakenshi
質問者

お礼

BLUEPIXY様、ご教授有難うございます。 出来ました。 nextSiblingなんてものがあったなんて、まったく勉強不足です。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 指定位置に要素を追加する

    <script type="text/javascript"> function test(){ var hako2 = document.createElement('div'); hako1.innerHTML = "TEST2"; var lk2 = document.getElementById('link2'); var li2 = lk2.parentNode; li2.appendChild(hako2); } </script> </head> <body> <div><a href="1" id="link1">1</a></div> <div><a href="2" id="link2">2</a></div> <div><a href="3" id="link3">3</a></div> <input type="button" onclick="test()" value="test"> </body> みたいなイメージなのですが、いかんせんスマートじゃありません できれば<div>で<a>を囲うのをやめたいのです。 ターゲットになる<a>の位置は固定ではなく前後に他の要素が入ることもあります <a href="2" id="link2">2</a>の次に<div>TEST2</div>を生成できればどんなのでも？いいのですが、何かいいやり方ありませんか？

  • 要素を追加する関数の作成

    <div id="here"></div> 上の様な要素内に要素と内容を追加する関数を作りたいのですが、思った結果が得られずに悩んでいます。 function ins( id ) { var output = document.createElement( 'span' ); output.className = 'ins'; output.innerHTML = <p>content</p>; var element = document.getElementById( id ); element.appendChild( output ); } ins( 'here' ); この様な場合にはどうしたら良いのか、何かアドバイスを頂けると嬉しいです。

  • 引数のある関数をhtml読み込み後に実行

    次のhtmlとスクリプトでresultのような結果を得たいのですが、スクリプトがheadにあるとエラーが出てしまいます。 body直前にスクリプトを置けば動作はするのですが、head内で動作させるにはどうしたら良いのでしょうか？ [html] <div id="here"></div> [JavaScript] function ins( id ) { var output = document.createElement( 'span' ); output.className = 'ins'; output.innerHTML = '<p>content</p>'; var element = document.getElementById( id ); element.appendChild( output ); } ins( 'here' ); [result] <div id="here"> <span> <p>content</p> </span> </div> よろしければどなたかアドバイスを頂けると助かります。 よろしくお願い致します。

  • 「option」の追加におけるselectedの指定での動作は？

    「createElement」を用いて、ドロップダウンのoptionを追加するスクリプトを 作成しました。 このドロップダウンでは、月・日を選択するもので当日の日付をselected の属性を 付けたいと考え、つぎのコードを作成しましたが、当月が選択されたところで スクリプトが止まってしまう（抜けている）のです。 function appendTest(frmParts1,frmParts2,frmParts3){ if (!document.createElement) return; strDate = new Date(); for (ii = 1;ii < 13;ii++){ var ele = document.createElement("option"); ele.value = ii; var str = document.createTextNode(ii); ele.appendChild(str); document.info_inp.elements[frmParts2].appendChild(ele); } // alert("ok1"); document.info_inp.elements[frmParts2].options[strDate.getMonth()].selected = true; for (ii = 1;ii < 32;ii++){ var ele = document.createElement("option"); ele.value = ii; var str = document.createTextNode(ii); ele.appendChild(str); document.info_inp.elements[frmParts3].appendChild(ele); } // alert("ok2"); document.info_inp.elements[frmParts3].options[strDate.getDate()-1].selected = true; } コメントにしている alert(); を生かすと、想定どおりに当日の日付が選択されますが、 何故alert(); を外すと想定した動作が行われないのかがわかりません。 selectedを指定する行を外せば全く問題ない動作をするようですが、これでは 当日の日付が選択された状態にはなりません。 なんとかして「日付が選択された状態」にしたいのですが、何らかの処理が 欠けているのでしょうか。 どなた様かご教示願います。

  • 別ウィンドウへの要素の追加(javascript)

    javascriptで下記の内容で要素を追加した場合、同一ウィンドウに表示した場合に比べて表示速度が非常に遅くなります。速く表示する方法はありませんでしょうか？ **************************************************************************************** sample1.html（一部） **************************************************************************************** <script type="text/javascript"> var win1 = window.open("aaaa.html", "", "width=400,height=200"); var ele = win1.document.createElement("div"); // 新規に要素（タグ）を生成 var str = win1.document.createTextNode("あいうえお"); // 生成する要素の値（文字列） ele.appendChild(str); // 生成する要素の作成（要素に値を追加） win1.document.body.insertBefore(ele,null); // ページ (aaaa.html) の最後に生成した要素を追加 </script> ***************************************************************************************** aaaa.htmlの内容 ***************************************************************************************** <html> <head> </head> <body> </body> </html> ***************************************************************************************** sample1.htmlを実行するとaaaa.htmlにあいうえおと表示されます。 別ウィンドウへの要素を追加するタグの数が一つですとよく分かりませんが、追加するタグの数が10個以上にもなると表示に時間がかかります。表示させるするウィンドウが同ウィンドウ(sample1.html)ですと一瞬で表示されます。別ウィンドウへの表示速度を速くする方法はありませんでしょうか？ また、別ウィンドウへ表示する場合は、なぜ時間がかかるのかが分かりません。 よろしくお願いします。

  • スクリプトで<div id="links">

    下記スクリプトで<div id="links"></div>のところを 開いた瞬間 <ul> <li><a href="http://foo.com/">foo</a></li> <li><a href="http://bar.com/">bar</a></li> </ul> に変換したいのですがうまくいきません どこをどのように変更すれば変換されるのでしょうか 【スクリプト】 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript"> var URL = new Array("http://foo.com/","http://bar.co.jp/"); var TITLE = new Array("foo","bar"); // 表示用コンテナ var container = document.getElementById('links'); // リセット container.innerHTML=''; var ul=document.createElement('ul'); container.appendChild(ul); for(var i=0;i<URL.length;i++){ var li=document.createElement('li'); var a=document.createElement('a'); // 'href'属性の設定 a.setAttribute('href',URL[i]); // ラベル a.appendChild(document.createTextNode(TITLE[i])); li.appendChild(a); ul.appendChild(li); } </script> </head> <body> <div id="links"></div> </body> </html>

  • 【javascript　文法】値渡し？参照渡し？

    以下実行すると、AAAをクリックしてもBBBをクリックしても「BBB」とアラートされます。 <html> <head> <script type="text/javascript" src="prototype.js"></script> </head> <body> <script type="text/javascript"><!-- var gDown= false; var div = document.createElement('div'); div.id = 'AAA'; div.innerHTML = 'AAA'; document.body.appendChild(div); Event.observe(div, 'mousedown',function(){ gDown = div; }); var div = document.createElement('div'); div.id = 'BBB'; div.innerHTML = 'BBB'; document.body.appendChild(div); Event.observe(div, 'mousedown',function(){ gDown = div; }); Event.observe(document, 'mouseup',function(){ alert(gDown.id); gDown=false; }); //--></script> </body> </html> javascriptって値渡しだと思っていたので、期待した動作と異なります。参照渡しだと考えると納得できるのですが、javascriptって 参照渡し？それとも値渡し？　と混乱しています。 この辺のところを、教えてください。お願いいたします。

  • JavaScriptでテキストボックスの追加

    下記のコードはただ文章を追加するコードです ここまでは勉強して自分で組んでしっかり動きます この文章を追加するところをテキストボックスにして保存したいのですが その方法がわかりません どこをどう変えれば出来るのでしょうか？ <!doctype html> <html> <head> <meta charset="UTF-8"> <script> function addNode(){ <!--追加する子ノードを生成--> var kodomo = document.createElement("p"); <!--このノードのタグで囲まれている部分のテキストを設定--> kodomo.innerHTML = "これが追加されたｐの領域"; <!--どこに追加するのか親ノードを指定--> var tuika = document.getElementsByTagName("div").item(0); <!--ここから子ノードを追加する命令--> tuika.appendChild(kodomo); } </script> </head> <body> <h1>ノードを追加します</h1> <!--初期状態は何にもなし--> <div></div> <div> <p>ここはHTMLで書かれているテキスト</p> </div> <!--ボタン--> <button onClick="addNode();">追加</button> </body> </html>

  • 引数を持つコールバック関数をonloadで複数実行

    下記のような内容で、指定したidを持つ要素に新しい内容を追加したいのですが、この内容だとcontent2のidを持つdiv要素にしか内容が追加されません。 そこで、対象となるidを持つ要素をいくつ追加しても反映されるようにしたいのですが、これを実現するにはどうしたら良いでしょうか？ アドバイス等、何かしらお力添えを頂ければ幸いです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Title</title> <script type="text/javascript"> // </body>直前には置きたくない // 指定したidを持つ要素に新たな内容を追加する関数 function ins( id ) { var output = document.createElement( 'span' ); output.innerHTML = '<p>content</p>'; // 追加する内容はhtmlやjavascriptなど必要に応じて変化する var element = document.getElementById( id ); element.appendChild( output ); } window.onload = function() { ins( 'content1' ); } window.onload = function() { ins( 'content2' ); } </script> </head> <body> <div id="content1"></div> <!-- window.onloadではins( 'content2' );に上書きされてしまう --> <div id="content2"></div> <!-- <div id="content3"></div> <div id="content4"></div> ... いくつ追加しても対応出来るようにしたい --> </body> </html>

  • createElementが一瞬で消えてしまいます

    <script type="text/javascript"> <!-- function check(){ if(document.loginform.user.value==""){ var element1=document.createElement("span"); element1.innerHTML="Usernameを入力してください。"; element1.className="error0"; var ojbody1=document.getElementById("titlerror1"); ojbody1.appendChild(element1); false; } if(document.loginform.pass.value==""){ var element2=document.createElement("span"); element2.innerHTML="Passwordを入力してください。"; element2.className="error0"; var ojbody2=document.getElementById("titlerror2"); / ojbody2.appendChild(element2); false; } } // --> </script> <title>ログインページ</title> </head> <body> <div id="error"><font color="red"><?=$error?></font></div> <div id="loginform"> <form id="loginform" name="loginform" action="index.php" method="post"> <fieldset> <p> <div class="titlerror" id="titlerror1"> <label for="user">User Name <span class="hankaku">(半角英数字)</span></label><br /> </div> <input type="text" name="user" value="" id="user" text-align="middle"> </p> <p> <div class="titlerror" id="titlerror2"> <label for="pass">Password <span class="hankaku">(半角英数字)</span></label><br /> </div> <input type="password" name="pass" value="" id="pass" > </p> <div id="submit"> <p class="submit"> <button type="submit" name="login" value="login" class="button" id="login" onclick="check()"><img src="submit.png" border="0" alt="login" /></button> </p> </div> </fieldset> </form> </div> </body> javascript初心者です。 これを実行するとつくられたタグが一瞬だけ表示して消えてしまいます。（CSSを付けると） 上記は表示すらしません。 どこが間違っているか、なぜそうなのかを教えていただけると助かります。 お願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する