jQueryでDOM要素を生成する方法

jQueryを使ってDOM要素を作成する方法。

その１(旧バージョンでの方法)
その２(バージョン1.4以降)

# その１(旧バージョンでの方法)

以下の手順となる。

jQueryオブジェクトを生成する
jQueryオブジェクトに属性などを追加する
要素を取得し、jQueryオブジェクトを子要素として登録する

順番通り行うと以下の通り。なお、"$"の部分は"jQuery"としても問題ない。メソッドチェーンでも可能。

var objtest = $('<a>');//<a></a>
objtest.attr('href', 'http://example.com/');//<a href="'http://example.com/"></a>
objtest.text('example');//<a href="'http://example.com/">example</a>
objtest.appendTo( document.body );//<body><a href="'http://example.com/">example</a></body>

_^_

# その２(バージョン1.4以降)

上記その１の１・２を一気に実行できる。

$('<a>', { href: 'http://example.com/',
           text: 'example' } )
.appendTo( document.body );

その他、widthやheightを指定したり、チェック済みのチェックボックスを設定したりできる。
詳しくは以下のウェブサイト(日本語)を参照のこと。
http://idocsq.net/page/223

タグ：JavaScript

HOME ＞ 2011年の記事＞ jQueryでDOM要素を生成する方法