jQuery動態新增DOM元素 – 原意筆記本

正在處理一個案子時因為有一段語法是由 Javascrip 的元素標簽內的 name="命名" 控制的，一開始是思考使用將命名的部份利用空值來控制，不過後來找到這個來處理，也確定可以完成動態產生與控制

使用 jQuery 的 $('<div/>') 取代 html元素架構 <div></div>

$('#item').html('<div>test</div>');

1	$('#item').html('<div>test</div>');

如果還需要加上 Class 屬性，或是 style 屬性，甚至底下還需要包含其它子元素 (img、a)，程式碼會變成非常的長，而且不易維護！

$('#item').html('<div class="list" style="color:red">jQuery<a href="http://ithelp.ithome.com.tw"><img src="image.jpg"/></a></div>');

1	$('#item').html('<div class="list" style="color:red">jQuery<a href="http://ithelp.ithome.com.tw"><img src="image.jpg"/></a></div>');

也可以改成下面結構。

$('#item').html(
	$('<div/>')
	.addClass('list')
	.css('color','red')
	.html('jQuery')
	.append(
		$('<a/>')
		.attr('href','http://ithelp.ithome.com.tw')
		.append(
			$('<img/>')
			.attr('src','image.jpg')
		)
	)
);

$('#item').html(

$('<div/>')

.addClass('list')

.css('color','red')

.html('jQuery')

.append(

$('<a/>')

.attr('href','http://ithelp.ithome.com.tw')

.append(

$('<img/>')

.attr('src','image.jpg')

)

);

資料來源：
jQuery 動態新增 DOM 元素

標籤雲