• ベストアンサー

JSで動的にリンクを作成

JSで動的にリンクを作成をしたいのですがわかりません。 例を教えてもらったのですがどう書いていいのかわかりません…。 駄目な例: <div id="link"> <a href="http://aaa.aa/">aaaa</a> </div> いい例 <div id="link"></div> <script> document.getElementByID("link") に対してaddChild </script> いろいろ不足していると思いますがお願いします。

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

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

たとえばこんな感じ? <script> window.onload=function(){ var obj=document.getElementById('link'); var tag=document.createElement('a'); tag.setAttribute('href','http://aaa.aa/'); tag.appendChild(document.createTextNode('aaaa')); obj.appendChild(tag); } </script> test <div id="link"></div> test

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • リンク押下でタグを書き換えたい

    リンクが複数あって、押したリンク文字だけ<span></span>のみにしたいと 思っています。また対応するdivタグのdisplay属性も書き換えたいです。 とりあえず思いついたのは以下の方法なのですが、冗長ですし、 リンクの数が増えた場合に足していくのが大変です。 もっとシンプルに書く方法がないものでしょうか。 ご助言ください。 <html> <body> <script> function change(spanid,divid,menuName){ document.getElementById('menu1').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu1','div1','メニュー1')\">メニュー1</a>"; document.getElementById('div1').style.display="none"; document.getElementById('menu2').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu2','div2','メニュー2')\">メニュー2</a>"; document.getElementById('div2').style.display="none"; document.getElementById('menu3').innerHTML = "<a href=\"javascript:void(0)\" onclick=\"change('menu3','div3','メニュー3')\">メニュー3</a>"; document.getElementById('div3').style.display="none"; document.getElementById(spanid).innerHTML = menuName; document.getElementById(divid).style.display="block"; } </script> <ul> <li><span id="menu1">メニュー1</span></li> <li><span id="menu2"><a href="javascript:void(0)" onclick="change('menu2','div2','メニュー2')">メニュー2</a></li> <li><span id="menu3"><a href="javascript:void(0)" onclick="change('menu3','div3','メニュー3')">メニュー3</a></li> </ul> <div id="div1"> test1 </div> <div id="div2" style="display:none"> test2 </div> <div id="div3" style="display:none"> test3 </div> </body> </html>

  • onclick属性に外部jsと外部cssの記載方法

    表題の通りclickイベントを付与したいのですが、記載方法が分からなくて困っています。 例) <div id="sample1"> <a href="javascript:void(0);" onclick="document.getElementById('sample2').style.display='block'; document.getElementById('sample1').style.display='none'">ぴーしー</a> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </div> <div id="sample2" style="display:none"> <a href="javascript:void(0);" onclick="document.getElementById('sample2').style.display='none'; document.getElementById('sample1').style.display='block'">もばいる</a> </div> 上記のままだと更新ボタンを押さないと反映されなかったので、onclick属性にjquery.mobileを付与したいと思いまして。toggle,appendToなども試しましたが、挙動がおかしかったので、有志の方、代換え方法や助言をお願いします。

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

    <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>を生成できればどんなのでも?いいのですが、何かいいやり方ありませんか?

  • 外部ファイル(js)の呼び出し方法を教えてください。

    諸先輩方に、また質問させて下さい。 皆様のお力をお借りしjavascriptを利用してリンク先を変更させる事を解決する事が出来ましたが 外部呼出し(js)した場合、エラーが起こってしまいます。 他のjsファイルの場合は、何事も無く表示されるのですが、今回のリンク先変更という 変わった事をするのは初めての為、何が原因なのか全く解かりません。 jsに載せたいのは以下のスクリプトです。また表示させたいのはhtmlのテーブル内です。 恐らくですが・・テキストフォーム等が一緒だから駄目なのでしょうか・・・。 その場合の解決方法も教えていただければと思います。 呼び出すjsファイル例 <script language="javascript" src="change.js"> ======= <script> function change(){ var change=document.getElementById("change"); var tags=document.getElementsByTagName("a"); for(var i=0;i<tags.length;i++){ var url="http://aaa.bbb.ccc/"; var url2="?ddd="; var url3="eee"; var url4="&fff="; if(tags[i].href.match(url)){ tags[i].href=url+url2+url3+url4+change.value; }; } } </script> <a href="http://aaa.bbb.ccc/?ddd=eee&fff=xxxxx" target="_blank"> <img src="http://aaa.bbb.ccc/image/ddd.gif"></a> <br> <input type="text" id="change"><input type="button" value="変換" onclick="change()"> 以上です。宜しくお願いします。

  • リンクの色を調整する関数

    Webページ上のプルダウンメニューでテキストの色を変更する関数は作れるのですが、リンクの色を未参照/参照済みの両方とも変更する関数がどうしても作れません。 下記のソースgetElementById("text")のところを getElementById("link")としても、未参照の時の色しか変更できません。参照済みの色も併せて変更する関数は作れないでしょうか。 <html> <head> <script language="JavaScript"> function setColor(c) { document.getElementById("text").style.setAttribute("color", c); } </script> </head> <body> <div id="text">テキスト</div> <a href="http://oshiete.goo.ne.jp/" id="link">リンク</a><br> <select onChange="setColor(this.value)"> <option value="#000000">black</option> <option value="#0000ff">blue</option> <option value="#00ffff">aqua</option> <option value="#808000">olive</option> </select> </body> </html>

  • クリックで特定のdiv要素が表示されるJavascriptに追加機能を

    クリックで特定のdiv要素が表示されるJavascriptに追加機能を持たせたい よろしくお願い致します。 下記のようなコードで、HTML部分の「リンクテキスト」をクリックすると「クリックで開く内容」が表示され、かつ、リンクテキスト(id="link-1")の文字色が変わるJavascriptを使用しています。 ■Javascript部分 function showHide(targetID) { if( document.getElementById(targetID)) { if( document.getElementById(targetID).style.display == "none") { document.getElementById(targetID).style.display = "block"; document.getElementById('link-1').style.color = "#cc0000"; } else { document.getElementById(targetID).style.display = "none"; document.getElementById('link-1').style.color = "#000000"; } } } ■HTML部分 <a href="#" id="link-1" onClick="showHide('hoge1');return false;">リンクテキスト</a> <div id="hoge1" style="display:none;">クリックで開く内容</div> リンクテキストの文字色が変わる部分は見よう見まねで追加したのですが、文字色が変わる部分を、link-2、link-3・・というように同ページに複数配置したい場合、どのようなコードに変更すればよいのでしょうか。 できればid="link-1"などという記述はせずに、showHide('hoge1');をshowHide('hoge2');に変えて、<div id="hoge1" style="display:none;">を<div id="hogge2" style="display:none;">に変えるだけで、文字色も変わるようにできれば一番良いのですが、そのような方法はあるのでしょうか? 分かりにくい箇所は補足説明致しますので、どうぞご教授下さいますようお願い致します。

  • テキストリンクの色を徐々に濃くしたいのですが

    初心者の質問です。 リンクページを作っています。 ページが読まれたら、このテキストリンク色をそれぞれ透明から白100%に徐々に濃くしたいのです。(バックが黒です) (要するにテキストがフェードインする感じにしたいです。) マウスオーバーしたら、とかのサンプルはありますが、ページが開いた時にテキストリンク色が変わるようなものは見当たりませんでした。 どのブラウザでもある程度見れるもので(あまり古いバージョンは仕方ないです)よいスクリプトありますでしょうか。 どなたかご助言いただけたら助かります。 <html> <body> <div id="content"> <div id="link"> <div id="link1">○○○サイト <p><a href="a.html">● A site</a></p></div> <div id="link2">△△△サイト         <p><a href="b.html">● B site</a></p></div> <div id="link3">その他<p><a href="c.html">● C site</a></p></div> </div> </div> </body> </html> よろしくお願いいたします。

  • 表示中のタブに色を付けたい

    タブ1111~5555は青色表示されていますが 選択中には常に赤色表示させておきたいのですがどうすれば良いのでしょうか。 ご教授ください <html> <head> <script type="text/javascript"> function ChangeTab(tabname) { // 全部消す document.getElementById('tab1').style.display = 'none'; document.getElementById('tab2').style.display = 'none'; document.getElementById('tab3').style.display = 'none'; document.getElementById('tab4').style.display = 'none'; document.getElementById('tab5').style.display = 'none'; // 指定箇所のみ表示 document.getElementById(tabname).style.display = 'block'; } // --></script> </head> <body> <a href="#tab1" class="tab1" onclick="ChangeTab('tab1'); return false;">1111</a> <a href="#tab2" class="tab2" onclick="ChangeTab('tab2'); return false;">2222</a> <a href="#tab3" class="tab3" onclick="ChangeTab('tab3'); return false;">3333</a> <a href="#tab4" class="tab4" onclick="ChangeTab('tab4'); return false;">4444</a> <a href="#tab5" class="tab5" onclick="ChangeTab('tab5'); return false;">5555</a> <div id="tab1" class="tab"> <div class="information-newwarp">aaaa</div> </div> <div id="tab2" class="tab"> <div class="information-newwarp">bbbb</div> </div> <div id="tab3" class="tab"> <div class="information-newwarp">cccc</div> </div> <div id="tab4" class="tab"> <div class="information-newwarp">dddd</div> </div> <div id="tab5" class="tab"> <div class="information-newwarp">eeee</div> </div> <script type="text/javascript"><!-- // デフォルトのタブを選択 ChangeTab('tab1'); // --></script><!--■タブページデフォルト設定js--> </body> </html>

  • jQuery.lightpop.jsの動作について

    jQuery.js : Ver1.3.1 jQuery.light.js Ver0.7.5 使用ブラウザ:FireFox3.0.8(Firebugインストール済み) Google Chrome2.0.169.1 お世話になります。 現在弊社ではjQuery.lightpop.jsライブラリを使用して リンク先(以下例では「hogehogeName」のリンク先「hogehoge.html」)をポップアップ表示させようとしています。 以下(1)のように「静的」にテーブルタグを記述するとうまくいきますが (2)のように「動的」だとポップアップされず 普通にページ遷移してしまいます。原因はどこにあるのでしょうか?? ちなみにFireBugで動作確認を行いましたが、エラーはなかったです。 (1)タグ内にテーブルを直接記入 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightpop.js"></script> <script type="text/javascript"> $(function() { $('a[rel*=lightbox]').lightpop({overlayBgColor:'#FFF', contentFrameType:'box'}); $('a.lightpop').lightpop(); $('a[href$=.jpg], a[href$=.gif], a[href$=.png]').lightpop(); $('a[href*=.youtube.com/watch]').lightpop(); }); </script> </head> <body bgcolor="lemonchiffon"> <h4>ポップアップテスト<h4> <div id="view"> <table class="table1" id="table1" border="1" bgcolor="white"><tbody> <td class="col2"><a rel="lightbox" href="hogehoge.html">hogehogeName</a></td> </tr></tbody></table> </div> </body> </html> (2)divタグ内に「動的」にテーブルを記入する方法 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightpop.js"></script> <script type="text/javascript"> $(function() { $('a[rel*=lightbox]').lightpop({overlayBgColor:'#FFF', contentFrameType:'box'}); $('a.lightpop').lightpop(); $('a[href$=.jpg], a[href$=.gif], a[href$=.png]').lightpop(); $('a[href*=.youtube.com/watch]').lightpop(); &(view).innerHTML = '<table class="table1" id="table1" border="1" bgcolor="white"><tbody>' + '<td class="col2"><a rel="lightbox" href="hogehoge.html">hogehogeName</a></td>' + '</tr></tbody></table>'; }); </script> </head> <body bgcolor="lemonchiffon"> <h4>ポップアップテスト<h4> <div id="view"></div> </body> </html>

  • innerHTMLに入れたリンクが反応しない

    どのジャンルで質問しようか迷ったのですが、ここでお願いします。 次のようにしてマウスオーバーした時にリンクが現れるようにしたのですが、 たしかにyahooのリンクは現れたのですが、クリックしても反応がありません・・・ どうすればリンクを機能させることができるのでしょうか? <STYLE TYPE="text/css"> <!-- DIV.sample {  background-color:#FFFFFF;  position: static;  display:'block'; } --> </STYLE> <SCRIPT language="JavaScript"><!-- function do_sample(){  document.getElementById('sample').innerHTML = "<a href=http://www.yahoo.co.jp>yahoo</a>"; } // --></SCRIPT> <div id="sample" class="sample" onMouseOver="do_sample()">ココ</div>