- PR -

[JavaScript] document以下のスマートな書き方消し方

1
投稿者投稿内容
ぽち
常連さん
会議室デビュー日: 2006/05/31
投稿数: 21
投稿日時: 2006-08-04 16:57
お世話になります。

document.getElementById("oya").innerHTMLを使って動的にHTMLを変更たいと思います。
下のようなコードでoya要素にkoを大量に追加していますがとても強引な事をしてるんじゃないかと
違和感があります。スマートな方法はないものでしょうか？

getElementById("oya").appendみたいなメソッドがあれば美しくなると思うのですが・・

strHTML = document.getElementById("oya").innerHTML ;
document.getElementById("oya").innerHTML = strHTML + "<DIV ID='ko1'></DIV>"


また下記のようなHTMLが生成された場合
<DIV ID="ko1"></DIV>要素のみを消去したいと思っています。
やはりこれも親要素を全部変数に退避してテキスト扱いでreplaceとかすれば
形は同じになりそうですがやはりカッコ悪いような・・
すみませんがご存知の方がいらっしゃいましたら教示ください。

<DIV ID="oya">
<DIV ID="ko1">
</DIV>
<DIV ID="ko2">
</DIV>
<DIV ID="ko3">
</DIV>
<DIV ID="ko4">
</DIV>
</DIV>
mio
ぬし
会議室デビュー日: 2005/08/25
投稿数: 734
お住まい・勤務地: 神奈川県
投稿日時: 2006-08-04 17:18
動的に要素を1つずつ追加したいのなら、document.createElement("div")してappendChild()がふつうです。
innerHTMLによる設定は、一回で大量の、複雑な組み合わせの要素を追加したい場合に有効です。
削除はremoveChild()でできます。
ぽち
常連さん
会議室デビュー日: 2006/05/31
投稿数: 21
投稿日時: 2006-08-07 11:06

下記のように記述することで意図通り動作しました。
ただ追加する時にappendChildするのは速度が遅いようですので
従来のようにinnerHTMLを取得して新しいHTML+取得したHLMLを足した値を
代入しようと思います。大変助かりました。

追加
Newdiv = document.createElement("DIV")
Newdiv.id=strID ;
Newdiv.style.Top = "0px";
Newdiv.style.left = "0px";
Newdiv.style.CURSOR = "move";
document.getElementById('oya').appendChild(Newdiv);

消去
document.getElementById("oya").removeChild(delDIV)
1

スキルアップ／キャリアアップ（JOB@IT）