- ベストアンサー
HTMLを動的に変更する方法
<div id="foo"></div> の中に、後から読み込んだJavaScriptファイルでHTMLを流し込みたいのですが、それにはどのように記述するのがよいのでしょうか。 あまりに古いブラウザに対応する必要はありませんが、ある程度幅広く、ＯＳやブラウザに依存せずに実行させる必要があります。 また、実行タイミングはHTMLの描画途中（window.onload発生前）です。 確か、innerHTMLを変更する方法やDOMの何とかいう関数を使う方法などがあったように思うのですが、どれがどのブラウザのどのバージョンで実行できるのか分かりません。 そういうことが載っているサイトなどありましたら、そちらも教えてください。 よろしくお願いします。
- mone
- お礼率70% (80/114)
- JavaScript
- 回答数5
- ありがとう数2
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (4)
- kotobukie
- ベストアンサー率50% (2/4)
DOM使用ですが、下記のようにかけます。 var MESSAGE = "こんにちは"; document.getElementById("foo").appendChild(document.createTextNode(MESSAGE));
補足
ご回答ありがとうございます。 createTextNodeはinnerTextに相当するものと考えて宜しいでしょうか？ また、このようなメソッドの一覧や説明のあるサイトをご存知でしたらぜひ教えてください。 それと、このDOMを使った方法とinnerHTMLやinnerTextを使った方法は、そのように使い分けるのがよいのでしょうか。 何か指針などがありましたら、ぜひ教えてください。 よろしくお願いします。
- Blaise
- ベストアンサー率33% (13/39)
おっと、へんなURI貼りつけてしまったようです。失礼しま した。そうですね、MACとの関係では、以下のようなもので しょうか。 http://www.din.or.jp/~hagi3/JavaScript/JSTips/ProbMac5.htm#innerHTML http://nanto.asablo.jp/blog/2005/10/29/123294 http://www.quirksmode.org/bugreports/archives/explorer_mac/index.html innerHTMLはECMA非標準ですがIE、Opera、Gecko(N6/N7/Moz)などで対応しています。 それから、おっしゃっているのは、DOMのcreateElementだと 思いますが、DOMでは、createElementでdocumentのelementを 設定するためのオブジェクトを生成します。 実際の簡単な記述を書いておきます。（未テストですが動くと思います^_^）。 <html> <head> <script type="text/javascript"> function crEle(){ var oSpan = document.getElementById('oDiv'); oSpan.innerHTML = ''; {var oElement = document.createElement('textarea'); oSpan.appendChild(oElement);} } </script> </head> <body> <input type=button value="createTextArea"onclick="crEle()"> <br> <div id="oDiv"></div> </body> </html>
お礼
遅くなりましてすみません。 テストコードちゃんと動きました。 imgの場合、oElement.srcにURLを入れると画像も表示されましたし、これでばっちりです。 どうもありがとうございました。
- hrm_mmm
- ベストアンサー率63% (292/459)
＞また、実行タイミングはHTMLの描画途中 （window.onload発生前）です。 onload前には、DOMのオブジェクト群がまだ完成していないのでinnerHTMLを使うためにはページの最後にスクリプトを記述することになります。 操作したいタグより手前に書くと、オブジェクトが存在しないというエラーが発生します。 それよりは、その挿入したい場所にscriptタグを書いて、直接document.write()したり、または、それを関数にして、その場所では関数呼び出しだけとしたり、 外部scriptファイルで直接document.write()するとかの方がよさそうです。 これらは、JavaScriptが動作するブラウザでは間違いなく実行可能です。 <head> <script type="text/javascript"> function prewrite2(){ document.write('「初期化文字」'); } </script> </head> <body> <div id="foo"> <script type="text/javascript"> document.write('文字列。'); prewrite2(); // または、ここには関数呼び出しだけを書いておく </script> <script type="text/javascript" src="out.js" charset="Shift_JIS"> <!-- または外部ファイルをここに呼び出す --> </script> </div> </body> ーーーー out.js ーーーー document.write('［外部書き込み］');
補足
ご回答ありがとうございます。 HTMLを流し込むJavaScriptファイルは、必ず目的のIDを持ったタグの下に書かれるので順番の問題は大丈夫です。 慌ててたので質問に書き忘れましたが、scriptタグにdeferをつけなければならないため、中でdocument.writeすることができません。そのためinnerHTMLやその他の方法を模索していたところです。 何か参考になりそうな情報がありましたらよろしくお願いします。
- Blaise
- ベストアンサー率33% (13/39)
かたちとしては、 document.getElementById('foo').innerHTML=yourFile; です。 innerHTMLにかんするブラウザ非対応は http://www.usamimi.info/~vingtsept/Browser/index_j.html がよいかと。
補足
ご回答ありがとうございます。 innerHTMLはmacのIEで問題があるというような記事を見かけたのと、これからはDOMのcreate何とかとかいうメソッドを使うのが主流みたいな記事を見かけたので、そういう情報もお持ちでしたらよろしくお願いします。 なお、innerHTMLも併用するつもりなのですが、これはdocument.getElementByIdが使えるブラウザならOKと認識していたのですが、問題ないでしょうか。 参考URLも見ましたが、これは各ブラウザのinnerHTMLへの対応状況ではなく、このサイトの各ブラウザへの対応状況のようです。
関連するQ&A
- JavascriptでHTMLを書き換えたいのです
うまく動作しないJavascriptなのですが、こういった方法は可能なのでしょうか？ お分かりになりましたらご教授お願いします。 -------------------- ■html <div class="orenge1"></div> オレンジ１です<br> <div class="orenge2"></div> オレンジ２です<br> <div class="orenge3"></div> オレンジ３です<br> -------------------- ■Javascript 記述は最下部の</body>直前です。 <script type="text/javascript"> window.onload = function() { document.getElementsByClassName("orange1").innerHTML = ('<a href="./item/?item=orange1">商品はコチラ</a>'); document.getElementsByClassName("orange2").innerHTML = ('<a href="./item/?item=orange2">商品はコチラ</a>'); document.getElementsByClassName("orange3").innerHTML = ('<a href="./item/?item=orange3">商品はコチラ</a>'); } </script> -------------------- ■やりたい事 <div class="orenge1"></div> の部分に <a href="./item/?item=orange1">商品はコチラ</a> を表示したいと思っています。 同一ページに複数回表れる場合もあります。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- onloadイベント発火条件
window.onload <body onload="function(){}"> <img src="hoge.jpg" onload="function(){}"> <script src="hoge" onload="funct" でも <div>や<p>ではonloadイベントは無いですよね？ どういう場合にonloadイベントは発火するんでしょうか？ window , body ,その他ｓｒｃがあるdom でしょうか？ ブラウザ依存もあるでしょうが、仕様的なものはどうなってますでしょうか？
- ベストアンサー
- JavaScript
- リロードせずにHTMLタグ出力（innerHTML以外の方法で）
初めまして。 下記の条件で、HTMLをリロードせずにHTMLタグを出力する方法をご存知の方がいらっしゃれば、教えていただけないでしょうか。簡単に言うと、innerHTMLのようにHTMLをリロードせずに動的に出力する方法が知りたいのです。（innerHTMLはこちらの事情で使えません） ・IE6限定でよい ・JavaScript,CSS,DOMはOK ・DynamicHTMLはNG（innerHTML等） ・一度HTMLを読み込んだ後、動的にHTMLタグを出力する ・出力する文字列の中にタグがあり、これが有効になるようにしたい （例：たとえば、動的にHTNLタグである<b>hogehoge</b>とかを出力して、ブラウザ上にはhogehogeという文字列が太文字で表示されるようにしたいのです） ※試してみたがだめだった方法 １．document.write()による出力 ⇒これをするとページがリロードされてしまうので条件にあわず ２．getElementById('hoge')で、<div id='hoge'> </div>のnodeValueに文字列を代入して出力 ⇒これをしても、HTMLタグではなく文字列としてHTMLタグが出力される。 よろしくお願いします！
- 締切済み
- HTML
- javascriptを起動した後のウェブページを取得するには
こんにちは。よろしくお願いいたします。 以下のようなHTMLソースをブラウザで読み込むとhogeと 表示されますが、PHPのfile_get_contentsやPerlのLWPなどを使って ページを取得するとソースそのものが取得されます。PHPやPerlを使って ブラウザから見たソース(以下の例ではhoge)を取得するには どのようにしたらよいのでしょうか？ <script type="text/javascript"> window.onload=function (){ document.getElementById("a").innerHTML="hoge"; } </script> <div id="a"></div>
- ベストアンサー
- PHP
- <body onload=""> と window.onload
JavaScriptのonload処理についての質問です。 現在Java、JSP、JavaScript等でWebアプリケーションを作成しているのですが、 bodyタグ中のonloadに記載したファンクションが時々呼ばれないという問題が起きています。 （こんな感じで記述 <body onload="hoge();hogehoge();"> hogehoge()がたまに呼ばれないことがある・・・） これを回避する方法として、「onload処理をwindow.onloadに記述すれば良い」 という話を聞きました。 （こんな感じで記述 <script> window.onload = function(){ hoge();hogehoge(); } </script> ） 「bodyタグ中に記述するとたまに呼ばれないものが、window.onloadに記述すると確実に呼ばれる」 なんてことがあるのでしょうか？ 「２つめのファンクションが呼ばれない」という現象がたまにしか発生しないので、 window.onloadに記述する方法で確実に呼ばれるようになったという保証がとれません。 知識として知っている方がいれば是非教えていただきたいです。 よろしくお願い致します。 ※ブラウザはIEを使用 バージョンは IE → 6.0 JavaScript → 1.1 です。
- 締切済み
- JavaScript
- javascriptで編集されたHTMLのソースの確認方法について
お世話になります。 JavaScriptで編集したHTMLコードのソースコードを確認する方法をご存知の方いらっしゃいましたら、ご教授いただけると幸いです。 よろしくお願いします。 【実施例(抜粋)】 -main.html- <script src="test.js" type="text/JavaScript"></script> <div id="display"></div> -test.js- BHTML='動的に編集されたHTML'; $('display').innerHTML = BHTML; 上記のようなことをやろうとしているのですが、BHTMLの内容を動的に編集しており、バグの修正のために、ブラウザー上で実際にどのようなソースコードになっているのかを確認したいと考えています。 ブラウザーのソース表示機能を使用した場合、<div id="display"></div>に表示された内容のソースは表示されないようなのです。何か良い方法がありましたら、ご教授のほどよろしくお願いいたします。
- ベストアンサー
- 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
- Ajax(XMLHttpRequest)で取得したHTMLをDOMにし
Ajax(XMLHttpRequest)で取得したHTMLをDOMにしたい ☆環境 ・Firefox 3.x ・greasemonkeyで動作させるJavascript ※上記環境からIEは考慮しないが、Google Chromeは考慮する可能性大 ☆行いたいこと xmlに成形されていない生のhtmlを、XMLHttpRequestで取得しDOMとして利用したい ☆調べたこと https://developer.mozilla.org/ja/XMLHttpRequest overrideMimeType()メソッドを使用すれば、responseXMLでエラーにならない(だけ) ☆現状 一応[window.]document.createElement()でテンポラリ用のdivを用意し、 responseTextで一度書き込み、改めて[window.]documentから動作させています。 この方法だと非同期にしづらいため、なにか良い方法はないでしょうか？ よろしくお願いします。
- ベストアンサー
- AJAX
- window.onLoad について
<body> タグに、onload=関数名・・・ と記述するとなぜかオブジェクトがありませんとかで 実行されない時があるため、 <head>タグ内に <script type="text/javascript"> window.onLoad=function(){ 関数名} </script> と記述してみたところ、まったく関数が動作しなくなってしまいました。 ステータスには「ページが表示されました」とでていて、スクリプトエラーにもなっていないようです。 原因がわからず、それならば・・・ htmlを順番に表示していくのだから、htmlの最後のほうに記述すればいいのでは？ と思い、 </body>の直前に <script type="text/javascript"> 関数名 ← onloadで動作させる関数 </script> と記述してみたところ、うまく表示できました。 この記述方法って正しいのでしょうか？ 環境に依存するのか、毎回悩まされるし、毎回対処方法が違ったりしているので ホントに困っています。 アドバイスお願いします。 #何故 window.onLoad=function(){ 関数名 } ではまったく動かなかったのでしょう。。。
- 締切済み
- JavaScript
- HTMLからXHTMLへ変更する際のhtmlファイルの内容の変更について
HTML4.01では<div style="color:#ffffff">と</div>の間の文字色をjavascriptの中の関数で変える時、 <script type="text/javascript"> function func() { document.getElementById("xx")="#ff0000"; } </script> と記述しますが、XHTMLではstyle属性が非推奨となっています。 XHTMLでstyle属性を使わずにボタンを押すことで<div style="color:#ffffff">と</div>の間の文字色を変えるには javascriptの中の関数内でどのように記述すればよいのでしょうか。
- 締切済み
- HTML
お礼
ご回答ありがとうございます。 DOMの仕様書は読んだことがありませんでした。教えて頂いたURLはまださっと目を通した程度ですが、今後とても役に立ちそうです。 これまで教えて頂いた方法である程度実現できそうですので、今回はこれで締め切りたいと思います。 どうもありがとうございました。