• 締切済み

リロードせずに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'>&nbsp;</div>のnodeValueに文字列を代入して出力 ⇒これをしても、HTMLタグではなく文字列としてHTMLタグが出力される。 よろしくお願いします！

  • HTML
  • 回答数2
  • ありがとう数1

みんなの回答

回答No.2

Q1.画面表示変更のきっかけ（イベント）はなんでしょう？ onLoad onChange onMouseOver onClick Q2.<b>はfont-weight:bold;とし、innerTextでは？ 【Case1】レイヤーのalpha値を変更 【Case2】CSSのVisibility{visible|hidden} 【Case3】document.all("hogeid").innerText document.getElementById("hogeid" ).innerText hogeid.innerText 【Case4】SSIの<!--#include -->

ten1saiko
質問者

補足

条件が一つ足りていませんでした。innerHTMLというより、DynamicHTMLが使えないというのが、開発の制約になります。ですので、innerTextも同様に使えることができないのです。innerHTMLでは、できることは確認しているのですが。。。 回答ありがとうございます！

  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.1

IE6限定ならinnerHTMLが簡単でいいかと思いますが、なぜだめなんでしょうか？ どのような目的で、そうした条件設定、システム製作の必要があるのでしょうか？ （単に興味が沸いただけでもありあますが、質問にいたった「背景」がわかれば書かれていない制約もわかるし代替案が出せるかもしれない。） 一応、以下はtextareaの内容を解析して要素、属性、テキストに分け、DOMインターフェースを使ってdivの中に追加するスクリプトのサンプルですが、タグの解析は思いっきり手抜き（構文ミスがあった場合はもちろん、正当な構文でも正確に解釈できないケースが多々あります。）なので使用する状況によっては実用レベルではないかもしれません。 <html> <head> <title>タグを追加</title> <script type="text/javascript"> function hoge(){ var Source = document.getElementById('t1').value; var Target = document.getElementById('d1'); while(Target.firstChild) Target.removeChild(Target.firstChild); while(Source.match(/<([^>]+)>/)) { var Tag = RegExp.$1; Source = RegExp.rightContext; var Text = RegExp.leftContext; addTextNode(Target,Text); if(Tag.substr(0,1) == '/') { Target = Target.parentNode; } else { var Attrs = Tag.split(/\s/) newNode = document.createElement(Attrs[0]); for(var i=1;i<Attrs.length;i++){ AttrSet = Attrs[i].split(/=/); AttrSet[1] = AttrSet[1].replace(/\"/g,''); newNode.setAttribute(AttrSet[0],AttrSet[1]); } Target.appendChild(newNode); if(! Attrs[0].match(/^(img|br|hr|input)$/i)) Target = newNode; } } addTextNode(Target,Source); } function addTextNode(Target,Text){ if(Text != '') Target.appendChild(document.createTextNode(Text)); } </script> </head> <body> <p> <textarea id="t1" cols="80" rows="5"></textarea> <input type="button" value="タグ追加" onclick="hoge()"> </p> <div id="d1" style="border:thin solid #f00"></div> <p><input type="button" value="DIVのinnerHTMLを確認" onclick="alert(document.getElementById('d1').innerHTML)"> </body> </html>

ten1saiko
質問者

お礼

innerHTMLがだめというのは、作ろうとしているものの制約になっているからです。厳密にいうと、DynamicHTMLを使わずに実現したいと思っています。ですのでinnerHTMLがだめというのは、技術的制約ではないが、作り物としての制約になります。 上記の回答ありがとうございました。早速、試してみたいと思います！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • HTMLの出力で改行をさせない方法はありますか

    ASPでHTMLの一部だけASPの文法にしたい時、 <div><%= hogehoge %></div> のような感じで書くと思います。 ただ、ASPの部分が非常に長い場合にそこだけ改行したい場合が あります。 (上は変数を出力しているだけですが実際にはIf文などを使って いたりでもっと長いです) <div> <%= hogehoge %> </div> ↑だと出力されるHTMLも改行を含んでしまいます。 これをさせないようにするには <div><% = hogehoge %></div> こんな感じにするしかないのでしょうか。 これだとASPの見た目が悪いような気がするのですがどうにか ならないでしょうか。 <% %> ASPにおける↑の呼び方(正式名称)もよく分からないので (開始タグ/終了タグ?)調べようにも調べることができないでいます。 実は意外と当たり前のことだったりする可能性もありますが 何か方法があったら教えていただけると嬉しいです。

  • HTMLタグを機能させて出力する際のエスケープ処理

    「HTMLタグを機能させて出力する」際のエスケープ処理は、どうすれば良いでしょうか？ ＜例＞ ビューファイルの<head>タグ内に、下記のような文字列を渡して、実際に、タグとして機能させたい場合 <link rel="stylesheet" href="hoge.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> この場合、やり方としては、通常の文字列を渡すときのように、htmlspecialcharsで一旦「HTML エンティティに変換」した後、何らかの方法(htmlspecialchars_decode？)で元に戻すのでしょうか？ それとも、「HTML エンティティに変換」した後、再変換してタグとして使うことが明白な場合は、わざわざ「HTML エンティティに変換」する必要はないのでしょうか？ つまり、「HTMLタグを機能させて出力する」際のエスケープ処理は必要ない。やることと言えば、せいぜい、セッターで一旦、privateプロパティへ格納後、ゲッターで取り出すぐらい、なのでしょうか？

    • ベストアンサー
    • PHP
  • RubyのHTMLパーサーで複数のタグを抽出したい

    現在、Rubyを用いて あるWebページから特定のタグの要素を抽出して テキストデータに出力したいと思い、プログラムを書いているのですが、 途中で行き詰ってしまいました。 ちなみにHpricotやNokogiriといったHTMLパーサーを試してみました。 パーサーを使うのは初めてです。 例えば以下のようにHTML文書に抽出したい部分がDIVタグとPタグに囲まれていた場合、 ===================================== ・・・ <div class="content"> <div class="header">不要部分</div> <div class="title">抽出したい文字列１</div> <div class="subtitle">抽出したい文字列２</div> <div class="subtitle">抽出したい文字列３</div> <p class="paragraph">抽出したい文字列４</p> <p class="paragraph">抽出したい文字列５</p> <div class="comment">抽出したい文字列６</div> <div class="footer">不要部分</div> </div> ・・・ ===================================== このHTMLからまずは 抽出したい文字列１ 抽出したい文字列２ 抽出したい文字列３ 抽出したい文字列４ 抽出したい文字列５ 抽出したい文字列６ といった出力が得たいのです。 プログラムも書いてみました。 ===================================== #ドキュメント全体を取得（dataにはHTMLの文字列が入っている） html = Hpricot(data) #内容部分(contentクラスのdiv)を取得（CSSセレクタで記述） content = html/"div.content" ===================================== ここまでは良いのですが、 そのあと、div要素を取り出すだけであれば headerクラスと、footerクラスを抽出しないように ===================================== (content/"div:not(.header):not(.footer)").each{ |line| puts line.inner_html } ===================================== とすることで、 抽出したい文字列１ 抽出したい文字列２ 抽出したい文字列３ 抽出したい文字列６ が得られますが、pタグをカンマでdivの前に追加して ===================================== (content/"p,div:not(.header):not(.footer)").each{ |line| puts line.inner_html } ===================================== のようにすると、 抽出したい文字列４ 抽出したい文字列５ 抽出したい文字列１ 抽出したい文字列２ 抽出したい文字列３ 抽出したい文字列６ のように出力されます。 同様にdivの後にpを追加し ===================================== (content/"div:not(.header):not(.footer),p").each{ |line| puts line.inner_text } ===================================== のようにすると 抽出したい文字列１ 抽出したい文字列２ 抽出したい文字列３ 抽出したい文字列６ 抽出したい文字列４ 抽出したい文字列５ のようになってしまいます。 つまり、複数のタグを指定すると、指定した順序で抽出されるようです。 代わりに子供すべてを列挙するchildのようなものがあるかと、調べてみたのですが、 どうやらそのような書き方はないようです。 複数のタグを含む場合にはHTMLパーサーでは解析できないのでしょうか。 パーサーは抽出時に順番を保証はしてくれないのでしょうか。 あきらめて、正規表現で抽出しようと思いましたが、 ===================================== <div class="comment"> <div class="comment_header">ごちゃごちゃ</div> <div class="comment_body">抽出したい要素６</div> </div> ===================================== などDIVが入れ子となっている場合に、 非常にややこしく感じたので お手上げ状態です。 どのように、解決できるでしょうか。 よろしくお願いします。

    • ベストアンサー
    • Ruby
  • 正規表現に関する質問です。HTML文から以下の条件を含む特定の画像タグ

    正規表現に関する質問です。HTML文から以下の条件を含む特定の画像タグのみをマッチしたいのですが、うまくいかず悩んでいます。どなたかアドバイス頂けると助かります。 条件：imgタグのsrcが"http://hogehoge.com/hoge.jpg"である場合のimgタグ全て 例えば以下の3つ全てにマッチさせたいのです。 1.<img src="http://hogehoge.com/hoge.jpg" /> 2.<img style="height:100px" src="http://hogehoge.com/hoge.jpg" /> 3.<img style="height:100px" src="http://hogehoge.com/hoge.jpg" alt="hoge" /> このようなことはそもそも可能かどうかということも含めご教授頂けたらと思います。 よろしくお願いします！

    • ベストアンサー
    • PHP
  • フォームに書き込まれたHTMLタグを出力したい

    　フォームに書き込んだHTMLタグを、出力後、ちゃんとHTMLタグとして生成させる方法を知りたいのですが。(言葉足らずですいません、例えば、掲示板の入力フォームで、テキストに書かれた例えば<font color=red>というHTMLタグを使い、フォーム送信後、文字が赤くなっている、ということを実現させたいだけなのですが) 　当方、Perlどころかプログラミングそのものを理解していない者ですが、訳あってソースをいじるお手伝いをすることになって困っております。以前、さらっと一行、コードを書くだけで実現できると思ったのですが。ご教授頂ければ幸いです。

    • ベストアンサー
    • Perl
  • HTMLを動的に変更する方法

    <div id="foo"></div> の中に、後から読み込んだJavaScriptファイルでHTMLを流し込みたいのですが、それにはどのように記述するのがよいのでしょうか。 あまりに古いブラウザに対応する必要はありませんが、ある程度幅広く、ＯＳやブラウザに依存せずに実行させる必要があります。 また、実行タイミングはHTMLの描画途中（window.onload発生前）です。 確か、innerHTMLを変更する方法やDOMの何とかいう関数を使う方法などがあったように思うのですが、どれがどのブラウザのどのバージョンで実行できるのか分かりません。 そういうことが載っているサイトなどありましたら、そちらも教えてください。 よろしくお願いします。

  • div内の全てのaタグの色変更

    div内の全てaタグの色の変更する方法を探してます。 <div> ランダムな文字列 </div> <a>hogehoge</a> hogehogeは変えずdiv内のランダムな文字列内のaタグのみ色を変える方法はありますか？

    • ベストアンサー
    • HTML
  • ajaxでサーバより取得したHTML断片文字列をブラウザに正しく表示させたい

    質問１ ajaxを利用してWebサーバから「<B>hoge</B>」のような文字列を取得することはできたのですが、それをブラウザ上に太字のhogeとして表示させたいのですが、ブラウザでタグが解釈されず「<B>hoge</B>」のまま表示されます。サーバから取得したHTML断片文字列をブラウザに解釈させて表示させるにはどうしたらよいのでしょうか。 質問２ appendChild()を繰り返し実行すると、既に取得済みの文字列に対して、新たに取得した文字列がアペンドされます。アペンドさせずにボタン押下で取得した文字列だけを画面に表示させるにはどうしたらよいのでしょうか？ よろしくお願いいたします。 JavaScript var disp = document.getElementById('disp'); disp.appendChild(document.createTextNode(xmlhttp.responseText)); HTML出力位置 <div id="disp"></div>

  • 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によって表示したいと考えています。 よろしくお願いいたします。

  • HTMLタグが書かれた外部ファイルを、HTMLファイルに読込みたい

    複数のHTMLファイル内で、同じHTMLタグを書く部分がいくつかあります。 それらのHTMLタグの部分を外部ファイルか何かにして、HTMLファイル内で読み込むようにすることは出来ますか？ JavaScriptでは外部ファイル（jsファイル）の読み込みはできるようですが、HTMLではできないんでしょうか？ ※尚、CSSではやりたい事は出来ませんでした。 共通化できるのはスタイルだけなので・・。 私が共通化したいのは、HTMLタグです。 例えば <TD>hogehoge</TD> や <IMG src="hoge.jpg"> などのタグを複数のHTMLファイルで共有する為に 外部ファイル化したいんですが そんなことって出来るのでしょうか・・？ 上記のようなタグを複数のHTMLファイルで共通できる手段であれば、外部ファイルという形式じゃなくても別にいいのですが・・

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する