表示について

0   名前： 初心者です。 ： 2007/07/14（土） 19:40  ID:jmwKbJcM sub-bK
質問します。
B1〜D1各リンクを用意し、いずれかをクリックしたら<div id="A1"></div>にクリックされた<div id="B1〜D1" style="display:none;">テスト1〜3です</div>のいずれかを表示させたいのですが、参考サイトかもしくはスクリプトを教えて頂けないでしょうか？
---------------------------------------------------
<script type="text/javascript">
<!--
function VIWEHTML(id){

}
//-->
</script>

<title>test</title>
</head>

<body>
<div id="A1"></div>
<div id="B1" style="display:none;">テスト1です</div>
<div id="C1" style="display:none;">テスト2です</div>
<div id="D1" style="display:none;">テスト3です</div><br>
<br>
<a href="#" onclick="VIWEHTML()">テスト1を表示します。</a><br>
<a href="#" onclick="VIWEHTML()">テスト2を表示します。</a><br>
<a href="#" onclick="VIWEHTML()">テスト3を表示します。</a>
</body>
</html>
---------------------------------------------------
<div id="H1">テスト２です。</div>
H1表示用のリンクを押したら"id=A1"に「テスト2です。」が表示されるような感じです。
宜しくお願いします。
1   名前： 匿名 ： 2007/07/14（土） 19:40  ID:epW2eUw6 sub-8t
document.getElementById('A1').innerHTML = document.getElementById(id).innerHTML;
2   名前： 匿名 ： 2007/07/14（土） 19:40  ID:ZRvXvm0u sub-Cz
私としてはまずテキストノードを理解することをおススメする。でないと後々応用が効かない。
<p id="A1">出力領域</p>

<p id="B1">テスト 1 です</p>
<p id="C1">テスト 2 です</p>
<p id="D1">テスト 3 です</p>

<p onclick="viewText ('A1', 'B1'); ">テスト 1 を表示</p>
<p onclick="viewText ('A1', 'C1'); ">テスト 2 を表示</p>
<p onclick="viewText ('A1', 'D1'); ">テスト 3 を表示</p>

function viewText (outputId, inputId) {
    // 要素ノードを取得
    var output = document.getElementById (outputId);
    var input  = document.getElementById (inputId);
    
    // テキストノードを取得
    var outputText = output.firstChild;
    var inputText  = input.firstChild;
    
    output.data = input.data;
}
3   名前： 初心者 ： 2007/07/14（土） 19:40  ID:jmwKbJcM sub-bK
早々のご回答ありがとうございます。
1.の匿名様なるほどですね。
document.getElementById('A1').innerHTML = document.getElementById(id).innerHTML;
これで意図したように出力が出来ました。
有り難う御座います。

2.の匿名様
ご親切にソースまで書いて頂いてありがとうございます。
テキストノードですね本当に理解出来るようにこれから勉強していきたいと思います。
4   名前： マルチ ： 2007/07/14（土） 19:40  ID:dapnlQWT sub-Ds
◆マルチポスト
http://odn.okwave.jp/qa3163378.html

回答されたみなさま乙彼。
5   名前： 匿名 ： 2007/07/14（土） 19:40  ID:Qk72Q3Q/ sub-Cz
またか。じゃあ初心者云々に配慮する必要もなかったなあ。

私的には Range を使うのがベターだと思う。長くなるが、使い回すという条件付きならいろいろやりやすい。
var A1 = document.getElementById ('A1');
var B1 = document.getElementById ('B1');
var r = document.createRange ();
r.selectNodeContents (A1);
r.deleteContents ();
r.selectNodeContents (B1);
A1.appendChild (r.cloneContents ());
r.detach ();

innerHTML は速いと言う人もいるが、おそらく DocumentFragment を使いこなせてないだけで、再描画時間まで含めれば innerHTML は速くない。
一覧へ戻る