jQuery:DOM要素の生成

jQuery

無職のプログラミングさんの
jQueryでDOM要素を作成し、DOMツリーを構築する方法で紹介されていました。


DOM要素を作成する時には

    var jqul = $("<ul>");

で形で生成できます('-'*)

下記は生成した要素のクラスをいじったりとかw別要素に追加したりだとか(*'-')/

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery DOM要素生成</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load('jquery', '1');
</script>
<script type="text/javascript">
	$(function() {
		$("#btn_create").click(function() {
			// jQueryObjectということを分かりやすくするために変数のイニシャルを$にしている
			var $new_dom_area = $("#new_dom_area");
			var $jqul = $("<ul>").addClass("new create_ul");
			var i = 0;
			while (i < 5) {
				var $jqli = $("<li>").addClass("new create_li").text(i);
				$jqul.append($jqli);
				i++;
			}
			$new_dom_area.append($jqul);
		});
	});
</script>
</head>
<body>
	<div id="wrapper">
		<button id="btn_create" type="button">DOM要素生成</button>
		<div id="new_dom_area"></div>
	</div>
</body>
</html>