HTMLのエレメントごと入れ替えるには

<div id="x">test</div>
などの中(test)を入れ替えることは、
$('x').innerHTML=xxxx
などとできるのですが（prototype.jsを利用した場合）、
伺いたいことは、このid="x"ごと別のものに取り替えるにはどうしたらいいのかということです？
<div id="x">test</div>
↓
<div id="y">example</div>
のようにしたいのです。よろしくお願いします。

No.1 ベストアンサー 回答者： akaryu-ryu 回答日時： 2007/02/08 21:41

<div id="x">test</div>

のもうひとつ外側に<div>を付けてみてはいかがでしょうか？

<div id="z">
<div id="x">test</div>
</div>

書き換えは
z.innerHTML = "<div id='y'>example</div>";
で。

この回答への補足

早速の回答ありがとうございます。
実はすでに
<div id="z">
<div id="x1">...</div>
<div id="x2">...</div>
<div id="x3">...</div>
</div>
となっており、たとえばこのx2のみを別のものに取り替えたいのです。
ちなみに、階層としてもcssの関係上、変えたくないのです。
...
ですが、教えて頂いた本質としては、例えば元々の設計自体を多少のCSSのパースの時間を犠牲にしてでも
<div id="z">
<div id="oya-x1"><div id="x1">...</div></div>
<div id="oya-x2"><div id="x2">...</div></div>
<div id="oya-x3"><div id="x3">...</div></div>
</div>
として、x1をx4に変えたい場合は、
$('oya-x1').innerHTML=xxxxxx;
として中身を変えた上で
oya-x1 -> oya-x4　とid名を変更する、という手段が普通ということなんでしょうか？
何卒、よろしくお願いします。

補足日時：2007/02/10 09:53

No.2 回答者： yambejp 回答日時： 2007/02/08 22:15

まぁ単純に考えれば、id値のxをyに変更して、yのinnerHTMLを

exampleに変更すればよいのでは？

<div id="x">test</div>
<input type="button" value="x->y" onClick="document.getElementById('x').id='y';document.getElementById('y').innerHTML='example'">

この回答へのお礼

回答ありがとうございました。
idを変更して、その元に挿入するというアイディアはありませんでした。ありがとうございます。
ちなみに、ＣＳＳの関係上、階層を変えたくないので、挿入後に外側のdivを削除するなどの方法は可能でしょうか？

お礼日時：2007/02/10 09:53