- 締切済み
リロードせずに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タグが出力される。 よろしくお願いします！
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- pide_piper
- ベストアンサー率33% (24/72)
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 -->
- steel_gray
- ベストアンサー率66% (1052/1578)
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>
お礼
innerHTMLがだめというのは、作ろうとしているものの制約になっているからです。厳密にいうと、DynamicHTMLを使わずに実現したいと思っています。ですのでinnerHTMLがだめというのは、技術的制約ではないが、作り物としての制約になります。 上記の回答ありがとうございました。早速、試してみたいと思います！
補足
条件が一つ足りていませんでした。innerHTMLというより、DynamicHTMLが使えないというのが、開発の制約になります。ですので、innerTextも同様に使えることができないのです。innerHTMLでは、できることは確認しているのですが。。。 回答ありがとうございます！