• ベストアンサー

HTMLを動的に変更する方法

Blaiseの回答

  • Blaise
  • ベストアンサー率33% (13/39)
回答No.1

かたちとしては、 document.getElementById('foo').innerHTML=yourFile; です。 innerHTMLにかんするブラウザ非対応は http://www.usamimi.info/~vingtsept/Browser/index_j.html がよいかと。

mone
質問者

補足

ご回答ありがとうございます。 innerHTMLはmacのIEで問題があるというような記事を見かけたのと、これからはDOMのcreate何とかとかいうメソッドを使うのが主流みたいな記事を見かけたので、そういう情報もお持ちでしたらよろしくお願いします。 なお、innerHTMLも併用するつもりなのですが、これはdocument.getElementByIdが使えるブラウザならOKと認識していたのですが、問題ないでしょうか。 参考URLも見ましたが、これは各ブラウザのinnerHTMLへの対応状況ではなく、このサイトの各ブラウザへの対応状況のようです。

関連するQ&A

  • JavascriptでHTMLを書き換えたいのです

    うまく動作しないJavascriptなのですが、こういった方法は可能なのでしょうか? お分かりになりましたらご教授お願いします。 -------------------- ■html <div class="orenge1"></div> オレンジ1です<br> <div class="orenge2"></div> オレンジ2です<br> <div class="orenge3"></div> オレンジ3です<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> を表示したいと思っています。 同一ページに複数回表れる場合もあります。 よろしくお願い致します。

  • onloadイベント発火条件

    window.onload <body onload="function(){}"> <img src="hoge.jpg" onload="function(){}"> <script src="hoge" onload="funct" でも <div>や<p>ではonloadイベントは無いですよね? どういう場合にonloadイベントは発火するんでしょうか? window , body ,その他srcがあるdom でしょうか? ブラウザ依存もあるでしょうが、仕様的なものはどうなってますでしょうか?

  • リロードせずにHTMLタグ出力(innerHTML以外の方法で)

    初めまして。 下記の条件で、HTMLをリロードせずにHTMLタグを出力する方法をご存知の方がいらっしゃれば、教えていただけないでしょうか。簡単に言うと、innerHTMLのようにHTMLをリロードせずに動的に出力する方法が知りたいのです。(innerHTMLはこちらの事情で使えません) ・IE6限定でよい ・JavaScript,CSS,DOMはOK ・DynamicHTMLはNG(innerHTML等) ・一度HTMLを読み込んだ後、動的にHTMLタグを出力する ・出力する文字列の中にタグがあり、これが有効になるようにしたい (例:たとえば、動的にHTNLタグである<b>hogehoge</b>とかを出力して、ブラウザ上にはhogehogeという文字列が太文字で表示されるようにしたいのです) ※試してみたがだめだった方法 1.document.write()による出力 ⇒これをするとページがリロードされてしまうので条件にあわず 2.getElementById('hoge')で、<div id='hoge'>&nbsp;</div>のnodeValueに文字列を代入して出力 ⇒これをしても、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に記述すると確実に呼ばれる」 なんてことがあるのでしょうか? 「2つめのファンクションが呼ばれない」という現象がたまにしか発生しないので、 window.onloadに記述する方法で確実に呼ばれるようになったという保証がとれません。 知識として知っている方がいれば是非教えていただきたいです。 よろしくお願い致します。 ※ブラウザはIEを使用  バージョンは IE → 6.0      JavaScript → 1.1 です。  

  • 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>に表示された内容のソースは表示されないようなのです。何か良い方法がありましたら、ご教授のほどよろしくお願いいたします。

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

  • 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(){ 関数名 } ではまったく動かなかったのでしょう。。。

  • 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の中の関数内でどのように記述すればよいのでしょうか。