• ベストアンサー

<div>を移動するには？

以下のようなhtmlがあります。 -------------------------------------------- <html> <body> <div id="wrapper"> <div id="d1">ここは第1番です。<form type="input" name="b1" value="Topへ"></form></div> <div id="d2">ここは第2番です。<form type="input" name="b2" value="Topへ"></form></div> <div id="d3">ここは第3番です。<form type="input" name="b3" value="Topへ"></form></div> <div id="d4">ここは第4番です。<form type="input" name="b4" value="Topへ"></form></div> <div id="d5">ここは第5番です。<form type="input" name="b5" value="Topへ"></form></div> </div> </body> </html> -------------------------------------------- 例えばボタン"b3"を押すと、<div id="d3">が一番上に移動するようにするには、どうしたら良いでしょうか？ 残りのdivはそのままの順位で下にずれることになります。 sortなどは使えないと思いますし、どうすればイイのか見当がつきません。 もしお分かりの方おられましたら、ヒントだけでもお願い致します。

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

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

なんか例文が変じゃないすか？以下でどうでしょう？ <script> function goTop(obj){ var p=obj.parentNode; var pp=p.parentNode; pp.insertBefore(p, pp.childNodes.item(0)); } </script> <div id="wrapper"> <div id="d1">ここは第1番です。<input type="button" name="b1" value="Topへ" onclick="goTop(this)"></div> <div id="d2">ここは第2番です。<input type="button" name="b2" value="Topへ" onclick="goTop(this)"></div> <div id="d3">ここは第3番です。<input type="button" name="b3" value="Topへ" onclick="goTop(this)"></div> <div id="d4">ここは第4番です。<input type="button" name="b4" value="Topへ" onclick="goTop(this)"></div> <div id="d5">ここは第5番です。<input type="button" name="b5" value="Topへ" onclick="goTop(this)"></div> </div>

benneb
質問者

お礼

button、ちがってました（涙）。。。 なるほど、insertBeforeなんて関数があったのですか。 ちなみに、第1引数のpとは<div id="d3">、第2引数は<div id="wrapper">という理解で合っていますか？

その他の回答 (3)

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.4

#2,3です ×助長→○冗長　あぁ恥じの上塗り・・・

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.3

#2です。 参考リンクのinsertBeforeの説明に 「newChild が既に樹の中にある場合には、まずそれが取り除かれる。」 と、ありましたね。削除は助長だったようです。

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.2

wrapperから一旦削除 先頭に挿入すればいいかと。 <div id="d1">ここは第1番です。<input type="button" value="Topへ" onclick="sample(this)"></div> function sample(O){ var wrapper=document.getElementById('wrapper'); var target=O.parentNode;//押されたボタンの親 wrapper.removeChild(target);//wrapperから削除 wrapper.insertBefore(target,wrapper.firstChild);//先頭に挿入 } http://www.doraneko.org/misc/dom10/19981001/level-one-core.html#ID-1950641247

benneb
質問者

お礼

ありがとうございます。 やはりinsertBeforeですか・・・。 なんか、削除しなくても、第1引数は自動的に削除される（つまり移動）みたいですね。

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

関連するQ&A

  • perl WWW::Scraper の取り出し

    お世話になります。 以下のHTMLがあった場合 WWW::Scraperで各それぞれのinput属性のvalueデータを抜き出すにはどうすればいいでしょうか。 <html> <title>test</title> </head> <body> <div id="PAGE_TOP"> <body id="top" class=""> <form method="post" action="https://abc.def.gh/"> <input type="hidden" name="redirect_url" value="https://abc.def.gh/" /> <input type="hidden" name="display" value="2" /> <input type="hidden" name="state" value="123456789" /> </form> <script> <!-- bpssoSubmit(document.forms[0]); --> </script> </div> <!-- PAGE_TOP --> </body> </html> ほしい部分は 1:https://abc.def.gh/ 2:2 3:123456789 を抜き出したいと思っていますがCLIで 'html body#top div#PAGE_TOP form input'や '/html/body/div/form/input'としても空で帰ってきてしまいます。 宜しくお願い致します。

  • 一つのページで二つのFormを別々に使いたい

    <body> <form name="fm1"> <input type="hidden" value="1" id="page"> <input type="button" value="送信する" onClick="execute()"> </form> <form name="fm2"> <input type="hidden" value="2" id="page"> <input type="button" value="送信する" onClick="execute()"> </form> <div id="container">content</div> </body> </html> 上記のように同じ関数execute()を実行するのですが、受け渡す値がvalue="1" と value="2"と別々になっています。 素人考えではフォームfm1とfm2とは別々の値(1or2)を渡すと思ったのですが、どちらのボタンを押してもvalue="1"の結果となります。 二つのフォームを別々に動作させるにはどのようにすればよいでしょうか。

  • ソースコードに読み込み側phpの結果を表示させたい

    http://itpro.nikkeibp.co.jp/article/COLUMN/20060525/239029/?ST=develop このページではajaxを使ってhtmlファイルにphpファイルを読み込ませるサンプルが紹介されていますが、このサンプルを実際にブラウザで表示した後にctrl+Uで開くソースコードでは↓のようになっています。 <body> <form name="fm"> ISBNコード： <input type="text" name="isbn" size="30" /> <input type="button" value="送信" onclick="send()" /> <div id="result"></div> </form> </body> 読み込み側のphpファイルの内容も↓のようにソースコードに表示させたいです。 <body> <form name="fm"> ISBNコード： <input type="text" name="isbn" size="30" />4-7981-1070-1 <input type="button" value="送信" onclick="send()" /> <div id="result">XMLデータベース入門 NeoCore/XprioriでXMLDBを極める！</div> </form> </body>

    • ベストアンサー
    • AJAX
  • 2段階ラジオボタン後、DIVを表示したい

    色々と自力で試行錯誤しましたが、知識が足りません。 javaScriptのif構文とかswich構文の部分が問題かなぁ～と推測しますが、自力で構文を認識・改造が出来ませんので、ご指導をお願い致します。 1段目（ラジオ）＜バス＞＜電車＞ 2段目（ラジオ）＜バス/高級＞＜バス/普通＞ 2段目（ラジオ）＜電車/高級＞＜電車/普通＞ 3段目（DIV）＜高級バス＞＜バス＞＜高級電車＞＜電車＞ 2段目の動作がオカシイです。 連動している一方のみを表示したいです。（連動してないその他は、見えなくしたいです） 以下、ソースです。 <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <head> <style type="text/css"> .second , .third{ display: none; } </style> <script type="text/javascript"><!-- function AllHide() { document.getElementById('bus_high').style.display = 'none'; document.getElementById('bus_normal').style.display = 'none'; document.getElementById('train_high').style.display = 'none'; document.getElementById('train_normal').style.display = 'none'; } function SetSubMenu( idname ) { AllHide(); if( idname != "" ) { document.getElementById(idname).style.display = 'block'; } } // --></script> </head> <body> <form action=""> <label><input type="radio" name="move" value="bus" id="move_0" onClick="SetSubMenu(value);">バス</label> <label><input type="radio" name="move" value="train" id="move_1" onClick="SetSubMenu(value);">電車</label> </form> <form action=""> <div class="second" id="bus"> <label><input type="radio" name="grade" value="bus_high" id="grade_0" onClick="SetSubMenu(value);">バス/高級</label> <label><input type="radio" name="grade" value="bus_normal" id="grade_1" onClick="SetSubMenu(value);">バス/普通</label> </div> <div class="second" id="train"> <label><input type="radio" name="grade" value="train_high" id="grade_2" onClick="SetSubMenu(value);">電車/高級</label> <label><input type="radio" name="grade" value="train_normal" id="grade_3" onClick="SetSubMenu(value);">電車/普通</label> </div> </form> <div class="third" id="bus_high">高級バス</div> <div class="third" id="bus_normal">バス</div> <div class="third" id="train_high">高級電車</div> <div class="third" id="train_normal">電車</div> </body> </html>

  • HTMLのバリデーション処理

    HTML5の入力値バリデーションを使用して、各入力項目のinputタグを記述する場合、以下のような感じで合っていますか？ 各項目のチェック条件 ・氏名：必須チェック ・郵便番号：必須チェック、半角数字3桁、半角ハイフン、半角数字4桁の形式（例：123-4567） ・年齢：必須チェック、半角数字のみ入力、0～120までの入力のみ可能 ・URL：url形式 <body> <main id="content"> <form method="post"> <div> <label for="name">氏名</name> <input id="name" required /> </div> <div> <label for="zipcode">郵便番号</name> <input id="zipcode" pattern="\d{3}-?\d{4}" required /> </div> <div> <label for="age">年齢</name> <input id="age" min="0" max="120" required /> </div> <div> <label for="url">URL</name> <input id="url" type="url" /> </div> <div> <input type="submit" value="送信" /> </div> </form> </main> </body>

  • HTMLのバリデーション

    以下のHTMLにHTML5の入力値バリデーションを使用して、各入力項目のinputタグを記述する場合、年齢の項目のバリデーション処理を教えてください。 各項目のチェック条件 ・氏名：必須チェック ・郵便番号：必須チェック、半角数字3桁、半角ハイフン、半角数字4桁の形式（例：123-4567） ・年齢：必須チェック、半角数字のみ入力、0～120までの入力のみ可能 ・URL：url形式 <body> <main id="content"> <form method="post"> <div> <label for="name">氏名</name> <input id="name" required> </div> <div> <label for="zipcode">郵便番号</name> <input id="zipcode" pattern="\d{3}-?\d{4}" required> </div> <div> <label for="age">年齢</name> <input id="age" /> </div> <div> <label for="url">URL</name> <input id="url" type="url"> </div> <div> <input type="submit" value="送信" /> </div> </form> </main> </body>

    • ベストアンサー
    • HTML
  • CSSのdivパーツの配置がうまくいきません！助けてください！！

    CSSのdivパーツの配置がうまくいきません！助けてください！！ 完成予想図 ┌―――――――――――――――――――┐ ｜画像　　　　　　　　　　　　　　　　　｜ ｜┌――┐　　　┌――――――┐┌――┐｜ ｜｜ロゴ｜　　　｜｜　　　　　｜｜検索｜｜ ｜└――┘　　　└――――――┘└――┘｜ └―――――――――――――――――――┘ 現実・・ ┌―――――――――――――――――――┐ ｜画像　　　　　　　　　　　　　　　　　｜ ｜┌――┐　　　　　　　　　　　　　　　｜ ｜｜ロゴ｜　　　　　　　　　　　　　　　｜ ｜└――┘　　　　　　　　　　　　　　　｜ ｜┌――――――┐┌――┐　　　　　　　｜ ｜｜｜　　　　　｜｜検索｜　　　　　　　｜ ｜└――――――┘└――┘　　　　　　　｜ └―――――――――――――――――――┘ 画像の上にロゴを配置しています。 さらにロゴの同じ高さの右側に検索窓を付けたいと思っています。 現状のCSSは、以下のようになっています。 /* ヘッダー */ div#header {background-color: #017acd; background-image: url(sky.jpg); padding: 28px 20px 100px} div#header h1 {margin: 0} div#header p {color: #ffffff; font-size: 0.75em; margin: 0} htmlファイルにgoogleのサイト内検索パーツを追加しようと、 div#google {width: 240px; margin-right: 500px} を追加しましたが、実際はうまくいかず、ロゴの下に表示されます。 右側に移動することはできましたが、平行線上には持っていけません。 誰か助けてください・・・ HTMLファイル： <!-- ヘッダー --> <div id="header"> <h1><img src="logo.gif" alt="LOGO" /></h1> <p>このサイトは、料理を扱うサイトです。</p> <!-- SiteSearch Google --> <div id="google"> <form method=get action="http://www.google.co.jp/search"> <input type=text name=q size=26 maxlength=255 value=""> <input type=hidden name=ie value=Shift_JIS> <input type=hidden name=oe value=Shift_JIS> <input type=hidden name=hl value="ja"> <input type=submit name=btnG value="検索"> <input type=hidden name=domains value="yahoo.co.jp"><br> <input type=radio name=sitesearch value="yahoo.co.jp" checked>Site sherch by <img src="Logo_25gry.gif" alt="Google LOGO" align="absmiddle"> </form> </div> </div>

  • レイヤー内のフォームの内容を変更するにはどうすれば？

    JavaScriptを使って,テキストボックスに書かれている内容を変更できる様にしたいいのですが,フォームがレイヤー内にあるとうまく出来ません。 こちらがソースです。あくまで例です。ボタンをクリックすると書かれている内容が変わります。 <html> <head> <script lauguage="javascript"> function Form_Write(){ document.form.box.value="Click=true"; } </script> </head> <body> <div id=layer style="position:absolute;left:50px;top:50px;"> <form name="form"> <input type="text" name="box" size=20 value="Click=false"> <input type="button" name="button" value="click" onClick="Form_Write()"> </form> </div> </body> </html> これだとIEではうまく作動するのですが,NNだとうまく動きません。 document.layer.form.box.valueにしてもダメです。 document.layer.form has no propertiesというエラーが出ます。 どうすれば出来るのでしょうか？お助け願います。

  • JavaScriptで得た値を別ページに反映

    JavaScriptで得た値を別ページに反映させたいと思っています。 同一ページでは上手くいきますが、別ページへの反映ができません。 教えてください、宜しくお願いします。 同一ページのサンプル <html> <head> <title>aa</title> <Script LANGUAGE='JavaScript'> <!-- function fncDisp() { label1.innerHTML = document.form1.txt.value; } --> </Script> </head> <body> <form name='form1' action=''> <div id='label1'>ここに表示</div> <input type='text' name='txt' value=''> <input type='button' name='btn' value='ボタン' onClick='fncDisp()'> </form> </body> </html>

  • タグで、submitさせる方法について

    こんばんは。いつもお世話になります。 input type='submit'を、画像を使ってロールオーバーで実行したいのですが、 うまくいきません。１）は、ＯＫです。２）と３）は、ダメでした。 １）にある、name='delete_msg'　が重要な鍵ですが、 それをJavaScriptでどう扱えば良いのかわかりません。 ３）の<div id='delete' ..... onclick='javascript:....'>Delete</div>で実行させる場合、 function pmDelete()にどう書けば良いのか教えてください。 よろしくお願いします。 ------（例：ここから）----------------------------- <html><head> <script type='text/javascript'> function pmDelete(){ document.mSg.submit(); } </script> <style type='text/css'> div#delete { float: left; background-image: url(page_up.gif); text-indent: -1000em; overflow: hidden; cursor: pointer; } div#delete:active { background-position: 0 -20px; } </style> </head> <body> <form name='mSg' id='mSg' action='index.php' method='post'> <input type='checkbox' id='msg_id[]' name='msg_id[]' value='10' />111<br /> <input type='checkbox' id='msg_id[]' name='msg_id[]' value='10' />222<br /> <input type='checkbox' id='msg_id[]' name='msg_id[]' value='10' />333<br /> １）<input type='submit' name='delete_msg' value='Delete' /><br /> ２）<input type='submit' value='Delete' /><br /> ３）<div id='delete' name='delete' onclick='javascript:pmDelete();'>Delete</div> </form></body></html> ------（例：ここまで）-----------------------------

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する