innerHTMLを使い、文章を書き換えたい方法
- innerHTMLを使って要素の内容を書き換える方法について説明します。
- JavaScriptの記述を正しく配置することで、要素の内容を書き換えることができます。
- 関数化させてidを指定したタグが表示されてから命令を実行させることが必要です。
- ベストアンサー
innerHTMLを使い、書き換えたい
はじめまして。innerHTMLで文章を書き換えたいと思っています。 ■■■■■■■■■■■■ <div id='testid'>元の文章</div> <SCRIPT Laguage="JavaScript"><!-- document.getElementById('testid').innerHTML = "この文章に書き換える"; --></SCRIPT> ■■■■■■■■■■■■ とするとうまく<div>内の文章が書き換わるのですが、 以下のようにjavascriptの記述を先に持ってくるとうまくいきません。 ■■■■■■■■■■■■ <SCRIPT Laguage="JavaScript"><!-- document.getElementById('testid').innerHTML = "この文章に書き換える"; --></SCRIPT> <div id='testid'>元の文章</div> ■■■■■■■■■■■■ 検索して調べたところ、 「関数化させて id を指定したタグが表示されてから命令を実行させる」 必要があるとのことなのですが、書き方がわからずにいる次第です。 どなたかご教示いただければ幸いです。
- coltellosan
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
>><SCRIPT Laguage="JavaScript"><!-- >>document.getElementById('testid').innerHTML >> = "この文章に書き換える"; >>--></SCRIPT> >> >><div id='testid'>元の文章</div> このままでは、<div>が生成される前に、JavaScriptが実行されるため、エラーになるのだと思います。 JavaScriptを関数化し、<body>のonloadで実行してやればよいと思います。 <SCRIPT Laguage="JavaScript"><!-- function htmlChange(){ document.getElementById('testid').innerHTML = "この文章に書き換える"; } --></SCRIPT> <body onload="htmlChange();"> <div id='testid'>元の文章</div>
その他の回答 (1)
- yyr446
- ベストアンサー率65% (870/1330)
どのタイミングで書き換えたいんか解らんが、 別に<body>の中に<script>があっても違反じゃないんで、 最初のまま <div id='testid'>元の文章</div> <script type="text/javascript"> document.getElementById('testid').innerHTML = "この文章に書き換える"; </script> でもよいと思う。
お礼
ご回答ありがとうございます。 ページを読み込む際に自動で書き換えてくれて、閲覧者は最初から書き換えられた文章を目にする形にしたかったです。 経緯としては、外部のサービスを使っている中で、あるHTMLファイルを編集する権限が部分的にしかないため、いじれない部分をinnerHTMLで書き換えたかったのでした。 具体的には、 ■■■■■■■■■■■■ <html> <head> (私は編集できない) </head> <body> <!--私が編集できる部分ここから--> ★ここにinnerHTMLと、差し替えるべき文章を入れたい <!--私が編集できる部分ここまで--> <!--私が編集できない部分ここから--> <div id='testid'>元の文章</div> <!--私が編集できない部分ここまで--> </body> </html> ■■■■■■■■■■■■ となっており、<div id='testid'>を先に持ってくることができないのでした。 尚、書き換える行為が規約に違反するとか、そういうことはありませんのでご安心を。
関連するQ&A
- innerHTMLで、関数での記載内容を希望のエリアに表示したい。
お世話になります。 下記のように行うと、 「実際は、いろいろと表示したい」 が、 「aaaaaaaaaaaaaaaaaa」 の下に表示されてしまいます。 また、 <div id="DspArea"> の位置には、undefined と、表示されてしまいます。 document.getElementById("DspArea").innerHTML="tst"; とすれば、 <div id="DspArea"> の位置に正確に表示されます。 innerHTMLで、関数で記載したタグを含む文字列を表示させるには何か気をつけなければならないことがあるのでしょうか。 よろしくご教示お願いします。 <script type="text/javascript"><!-- function dspTst(){ document.write('実際は、いろいろと表示したい'); } // --> </script> <div> <div id="DspArea"> </div> <div> aaaaaaaaaaaaaaaaaaaa </div> </div> <script type="text/javascript"><!-- document.getElementById("DspArea").innerHTML=dspTst(); // --> </script>
- ベストアンサー
- JavaScript
- innerHTMLが動作しない。
JavaScriptをHTMLファイルに記述した場合、最初にfunctionスコープ内の動作以外は全て行なわれますよね。例えば、 <script type="text/javascript"> <!-- alert("test"); //--> </script> と書いた場合、ページの表示と同時にアラートが出ます。しかし上のalertの部分をdocument.getElementById("test").innerHTML = "test";にすると、これが実行されないのです。もちろん<div id="test"></div>タグはちゃんとbodyタグ内に記述してあります。functionを定義してbody onLoadで呼び出す方法もありますが、できればfunctionをむやみに使いたくないので、先のalertの時のように動作させたいのです。 これが動作しない原因は何なのでしょうか？
- ベストアンサー
- JavaScript
- innerHTMLの初期値
下記のソースがあります。 <SCRIPT TYPE="text/javascript"> <!-- function Change(id){ if(document.all){ document.all.result.innerHTML = document.all(id).innerHTML; }else if(document.getElementById){ document.getElementById('result').innerHTML = document.getElementById(id).innerHTML; } } //--> </SCRIPT> <a href="#" onClick='Change("ih2"); return false'>前</a><br> <a href="#" onClick='Change("ih3"); return false'>次</a><br> <div id="ih2" style="display:none">テキスト1</div> <div id="ih3" style="display:none">テキスト2</div> <br> <span id="result"></span> 前、次のリンクで表示されるテキストが切り替わるようにしているのですが、 クリックする前の段階では何も表示されていない状態です。 そこで、クリックする前でもid="ih2"の「テキスト1」が表示されている状態にしたいのですが、 なかなか出来ません。 functionの前に document.all.result.innerHTML = document.all.ih2.innerHTML; と記述してみましたが駄目でした。 id="ih2"の値を読み込んで表示させたいのですが、 何か良い方法はありませんか。
- ベストアンサー
- JavaScript
- innerHTML内では改行は禁止？
基本的なことかもしれませんが、JavaScript初心者なので質問させてください。 innerHTML内で改行を入れると実行されないのでしょうか？ たとえば、これ↓はうまく行くのですが、 <script type="text/javascript"> function change1() { document.getElementById('change1').innerHTML='<p>ハケには毛が多い</p><p>ハゲには毛がない</p><input type="button" value="失礼しました m(_ _)m" />' } </script> <div id="change1"> <p>カラスは黒い</p> <p>ガラスは透明</p> <input type="button" value="ここを押すと文章が変わります" onClick="change1();"> </div> こうすると↓うまく行きません。 <script type="text/javascript"> function change2() { document.getElementById('change2').innerHTML=' <p>ハケにはやはり毛が多い</p> <p>ハゲにはやはり毛がない</p> <input type="button" value="再び失礼しました m(_ _)m" />' } </script> <div id="change2"> <p>カラスは黒い</p> <p>ガラスは透明、、、じゃないものもある</p> <input type="button" value="ここを押すと文章が変わります？" onClick="change2();"> </div> 別に困っているわけではないのですが、 ソースは見やすく書きたいのでよろしくお願いします。
- ベストアンサー
- JavaScript
- innerHTMLにて設定した情報を再度取得する事は可能でしょうか？
innerHTMLにて指定idタグ情報を変更する事は出来るのですが、innerHTMLにて設定した情報を再度取得する事は可能でしょうか？ 下記のコードを考えてみたのですが、 再取得出来ません。 環境はXPでIE6とFF3です。 ご教授よろしくお願いします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <title>DOM情報の再取得</title> <script type="text/javascript" language="JavaScript"> <!-- function setText1(data) { document.getElementById("test1").innerHTML = data; return false; } function setText2(data) { document.getElementById("test2").innerHTML = data; return false; } function setText3(data) { document.getElementById("test3").innerHTML = data; return false; } //--> </script> </head> <body> <div id="test1"></div> <div id="test2"> </div> <div id="test3">テスト3</div> <br> <a href="javascript:void(0);" onClick="setText1('セットテスト1'); return false;">1</a> <a href="javascript:void(0);" onClick="setText2('セットテスト2'); return false;">2</a> <a href="javascript:void(0);" onClick="setText3('セットテスト3'); return false;">3</a> <script type="text/javascript" language="JavaScript"> <!-- document.write("<br><br>\n"+'再取得'+"<br><br>\n"); //document.write("js_test1="+document.getElementById("test1").childNodes[0].nodeValue+"<br>\n");//エラーになるのでコメントアウト document.write("js_test2="+document.getElementById("test2").childNodes[0].nodeValue+"<br>\n"); document.write("js_test3="+document.getElementById("test3").childNodes[0].nodeValue+"<br>\n"); //--> </script> </body> </html>
- ベストアンサー
- JavaScript
- innerHTMLを使ってID要素の内容を変えたい
innerHTMLを使ってID要素の内容を変えたいのですが、 下記のような使い方はできないのでしょうか？ var changeTEXT = document.all("hoge2").innerHTML; できない場合、これに変わるようなものがありましたら教えていただけたら、うれしいです。 よろしくお願いします。 <html> <head> <script language="JavaScript" type="text/javascript"> <!-- var changeTEXT = document.all("hoge2").innerHTML; function change1_ID(){ if(document.all){ document.all("hoge1").innerHTML = changeTEXT } if(document.getElementById){ document.getElemntById("hoge1").innerHTML = text1 } } //--> </script> <style type="text/css"> <!-- #hoge1 { margin: 0px; padding: 0px; height: 600px; width: 600px; } #hoge2 { margin: 0px; padding: 0px; height: 600px; width: 600px; } --> </style> </head> <body> <div id="hoge1" onclick="change_ID()"> ここの内容を変えたい</div> <div id="hoge2"> ここに入力されたHTMLの内容をhoge1の内容にしたい</div> </body> </html>
- ベストアンサー
- JavaScript
- JavaScriptのinnerHTMLの挙動について
下で"JavaScript内からJavaScriptを書き出したいのですが"で質問したものですが，ソースコードを簡単にして再質問したいと思います． ソースは以下のようにし，divタグのところにinnerHTMLで文字"test"とJavaScriptでアラートを表示させるものです．表示してみたところ，"test"は表示されるのですが，アラートは出てきません． これはinnerHTMLではHTMLのタグは評価されるが，JavaScriptは評価されない，ということなんでしょうか．JavaScriptのこのような仕様は調べにくいので困っています．回答宜しくお願いします． <html><head><title></title> <SCRIPT type="text/javascript"> <!-- var str='<font color="blue">test</font><script type="text/javascript">alert(123);</script>'; function gogo(){ document.all("here").innerHTML = str; } //--> </SCRIPT> </head><body> <div id="here" style="position:absolute;width:600px;left:0px;top:0px;"></div> <SCRIPT type="text/javascript"> <!-- gogo(); //--> </SCRIPT></body></html>
- ベストアンサー
- JavaScript
- JavaScript表示切替の問題
ボタンを押すたびに、こんにちはとこんばんはが切り替わるようにしたいのですが、 切り替わりません。なぜかわかる方がいたら教えて頂けると助かります。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="1">こんにちは</div> <input type="button" value="切替" onclick="func_switch()"> <script language="javascript" type="text/javascript"> function func_switch(){ if(document.getElementById(1).innerHTML="こんにちは"){ document.getElementById(1).innerHTML="こんばんは"; } else{ document.getElementById(1).innerHTML="こんばんは"; } } </script> </body> </html>
- ベストアンサー
- JavaScript
- innerHTMLでHTML要素の中身を変えたい
URLでidを指定して「色の違い」を表記しています。 今の「色の違い」に追加して「特徴の違い」も表記したいと考えています。 「現状」 ●サイトのURL http://www.hogehoge.com/?id=11 http://www.hogehoge.com/?id=21 http://www.hogehoge.com/?id=31 ●JavaScript <script type="text/javascript"> var arg = new Object, p = location.search.substring(1).split('&'); for(var i=0; p[i]; i++){ var kv = p[i].split('='); arg[kv[0]] = kv[1]; } function area(id){ if(11 == arg.id){document.getElementById(id).innerHTML = "赤い";} else if(21 == arg.id){document.getElementById(id).innerHTML = "青い";} else if(31 == arg.id){document.getElementById(id).innerHTML = "黒い";} else {document.getElementById(id).innerHTML = "白い";} } window.onload = function (){ var i; for (i=1;i<=3;i++) { /* type1～type3まで設定 */ area("type"+i); } } </script> ●HTML <div><span id="type1"></span>ポーチ</div> <div><span id="type2"></span>財布</div> <div><span id="type3"></span>カバン</div> ●サイト上の表示例（id=11の場合） 赤いポーチ 赤い財布 赤いカバン ※変更したい点 「おしゃれな」 「かっこいい」 「新しい」 「古い」 という４つの特徴の違いを追加したい ※変更後のサイト上での表示例 おしゃれな赤いポーチ おしゃれな赤い財布 おしゃれな赤いカバン 色４つ×特徴４つの計１６パターンを URLのidによって表示したいと考えています。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- リンク押下でタグを書き換えたい
リンクが複数あって、押したリンク文字だけ<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>
- ベストアンサー
- JavaScript
お礼
ご回答ありがとうございます。 上記の方法でできました! ですので解決といたしますが、もし気が向いたらでまったく構わないのですが、 <body onload>を使わない方法があるようでしたらご教示いただけたらうれしいです。 というのも、私にbodyタグの編集権限がないからです。 (詳細は2番目の回答者様へのレスに書かせていただきます。) 実際にはブラウザがうまく判断してくれているのですが、 記述としては、 <body> <SCRIPT Laguage="JavaScript"><!-- function htmlChange(){ document.getElementById('testid').innerHTML = "この文章に書き換える"; } --></SCRIPT> <body onload="htmlChange();"> <div id='testid'>元の文章</div> </body> と、bodyが重複している状況でして。