広告

posted by fanblog
「ここにブログの名前を入れます」は更新を終了しました。記事はすべて新ブログ「Big Bang」に移転済みです。記事のタイトルをクリックすると新ブログの該当記事に移動します。そちらでお楽しみください。

appendChildやinsertBeforeでノードを移動させる

DOMのappendChildは子ノードの追加、insertBeforeはノードの挿入のためのメソッドですが、これを使ってノードの場所を変更できます。

appendChildで移動する

たとえば、次のようなHTMLがあったとします。

<div id="outer">
<p id="morning">おはよう</p>
<p>こんにちは</p>
<p id="night">こんばんは</p>
</div>

ここで、下のコードを実行すると「おはよう」が「こんばんは」の後に移動します。

document.querySelector('#outer').appendChild(document.querySelector('#morning'));

実行例

おはよう

こんにちは

こんばんは

実行すると「おはよう」が「idがouterであるdiv」に追加されます。その結果、元の位置から最後にずれます。「おはよう」の位置がずれたので、「こんにちは」が先頭になります。

insertBeforeで移動する

上の例のHTMLに今度は次のスクリプトを適用してみます。すると最後の「こんばんは」が先頭にある「おはよう」の前に移動します。

var outer=document.querySelector('#outer');
var night=outer.querySelector('#night');
var morning=outer.querySelector('#morning');

outer.insertBefore(night,morning);

実行例

おはよう

こんにちは

こんばんは

これを知っていると、すごく便利だと思います。このブログのコメント欄の改造はこのメソッドを多用して実現しました。

新ブログ「Big Bang」で続きを読む