リロードせずにHTMLタグ出力（innerHTML以外の方法で）

締切済

質問者：ten1saiko
質問日時：2005/08/26 12:50
回答数：2件

初めまして。
下記の条件で、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件)

最新から表示
回答順に表示

No.2

回答者： pide_piper
回答日時：2005/08/27 07:51

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の

この回答への補足

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

補足日時：2005/08/29 01:16

通報する

- 0
- 件

通報する

No.1

回答者： steel_gray
回答日時：2005/08/26 14:57

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>

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2005/08/29 01:22

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！