jQueryで要素を動的に追加する

jQueryで要素を動的に追加する方法で、やったことのないやり方を見かけたので試してみました。

サンプルコード

HTML

<div id="sample"></div>

JavaScript

// liに追加する内容
var arr = ['リスト1', 'リスト2', 'リスト3', 'リスト4'];

$(function() {
	// ulタグを生成してinsertに追加
	var insert = $('<ul>').addClass('list');

	for(var i = 0; i < arr.length; i++) {
		// liタグを生成してテキスト追加
		var newLi = $('<li>').text(arr[i]);
		// insertに生成したliタグを追加
		insert.append(newLi);
	}

	// insertを#sample内に追加
	$('#sample').append(insert);
});

jQueryで要素を動的に追加するデモページ
$(‘<ul>’)などのようにHTMLタグを直接記述することで、HTMLを内部的に生成することができるようです。
　

【参考サイト】

• jQuery入門講座 使い方-画像のプリロード
• jQuery で画像をプリロード | Web Design Leaves