• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：innerHTMLの対象が動的に変わる場合…）

innerHTMLの対象が動的に変わる場合…

このQ&Aのポイント
  • innerHTMLで、一部だけDBを見に行った値に書き換えたいと思っています。
  • htmlファイルはバッチで作られていて、IDが固定ではなく、動的に変化することがあります。
  • JavaScriptを使って動的に変えることができず、困っています。規則性があるIDであれば、全部innerHTMLの対象にできるような書き方があれば教えていただきたいです。
  • ginfix
  • お礼率34% (330/963)

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

  • ベストアンサー
回答No.2

function setElementsInnerHTML (target, aryHTML) { 　Array.prototype.forEach.call (document.querySelectorAll (target), 　　 (function (e, i) { e.innerHTML = this[i]; }), aryHTML); } setElementsInnerHTML ('div[id^="target"]', ['123', '456']);

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

その他の回答 (1)

  • hyter
  • ベストアンサー率73% (31/42)
回答No.1

> 規則性があるIDであれば、全部innerHTMLの対象にできるような書き方 こんな感じでどうでしょう？ ===================== var strSample = "AAA"; var arrDivElements = new Array; // DIV要素を全て取得 arrDivElements = document.getElementsByTagName( "div" ); // DIV要素分ループ for ( var i = 0; i < arrDivElements.length; i++ ) { 　// IDが"target+数値"であれば内容を差し替え 　if ( arrDivElements[i].id.match(/^target[0-9]/i) ) { 　　arrDivElements[i].innerHTML = strSample; 　} } =====================

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 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 を指定したタグが表示されてから命令を実行させる」 必要があるとのことなのですが、書き方がわからずにいる次第です。 どなたかご教示いただければ幸いです。

  • 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"の値を読み込んで表示させたいのですが、 何か良い方法はありませんか。

  • 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の時のように動作させたいのです。 これが動作しない原因は何なのでしょうか？

  • 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の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>

  • innerhtmlで出た値から、ifで返り値を出す

    innerhtmlで出た値から、要素を判断し、if文で返り値を求めることは可能でしょうか。 具体的にはinnerhtmlで、2未満の数値が出た場合、 りんごを、4未満であればみかんと返すようにいたしたいです。 なお、回答が長くなることから、script文のみの記述でOKですが、 script文は省略なさらないでください。 <!--適当--> <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange101() { judge(); } function selectboxChange111() { judge(); } function judge() { /* この場合は、varではなくletを使う。*/ let val101 = document.forms.form101.Select101.value; let val111 = document.forms.form111.Select111.value; /* そもそも両方が当てたら、メッセージを出すのなら、outputは1つでいいのでは？ */ let target = document.getElementById("output201"); let target2 = document.getElementById("output202"); if ((val101 == "要素101")&&(val111 == "要素111")) { target.innerText = "合っています。"; target2.innerText = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form101" action=""> <select id="Select101" onchange="selectboxChange101();"> <option>---</option> <option value101 == "要素101">要素101</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> </body> <body> <form name="form111" action=""> <select id="Select111" onchange="selectboxChange111();"> <option>---</option> <option value111 == "要素111">要素111</option> <option>要素12</option> <option>要素13</option> <option>要素14</option> <option>要素15</option> </select> </form> <div id="output201"></div> <div id="output202"></div> <div id="output203"></div> <div id="output204"></div> <div id="output205"></div> </body> </body> </html>

  • divにinnerHTMLでセットすると一行分HTMLに表示されてしまう

    divにinnerHTMLでセットすると一行分HTMLに表示されてしまう Javascriptというよりcssの気もしますが。 IE6で確認してます。 <body bgcolor="#999999"> <div id="test_area"></div> このようにある場合、初期表示では行が表示されないのですが、 Javascriptで何か入れて、クリアしても一行分表示されてしまいます。 Javascriptで入れた時もずれないで欲しいのですが、何か良い方法はないでしょうか？ ちなみに初期化はscriptでこのようにしてます(dojo.byIdですが、getElementbyIdと同じ)。 よろしくお願いします。 dojo.byId("test_area").innerHTML = "";

  • innerHTMLでは無理でしょうか。

    var AAA = document.getElementById("hoge1"); AAA.innerHTML = "<div id=\"test0\" class=\"hoge\"><scr"+"ipt type=text/javascript src=hogege.js></scr"+"ipt></div>"; と言うように、<div id="hoge1"></div>を置換したいのですがうまく行きません。 置換した直後にhogege.jsを作動させたいのですが、思いつくのはこの程度です。。（笑 何か別な方法はございませんでしょうか。 IEのみ作動・・。とか言うのはご遠慮願います。 ご教授よろしくお願い申し上げます。

  • JavaScript　メソッドの呼び出し方について

    単純な質問で恐縮なのですが html内で、数か所、JavaScriptのInnerHTMLを使って表示させたい箇所があります。 <body> <div id="1"></div> <div id="2"></div> <body> たとえば、こうなっていたとして、idが1のところは、 JavaScriptのメソッド、Start(1)、2のところは、 Start(2)として、引数にIDを入れ、結果のInnerHTMLを 出力させたいです。 こんな感じでいけるんでしょうか？ <body> <script type="text/javascript"> Start(1); Start(2); </script> <div id="1"></div> <div id=""2"></div> </body> うまく動かず困っています。 Onloadとかトリガがあって指定する方法ならわかるのですが。 動かし方を教えていただけないでしょうか。 宜しくお願いします。

  • 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>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する