iT邦幫忙

4

jQuery 動態新增 DOM 元素

培根 2012-04-15 23:59:2920685 瀏覽

使用 $('<div/>') 取代 '<div></div>'
現在網頁除了用到 AJAX 外,
有時候也會有動態新增 DOM 元素的需求,
一般來說會這樣做

$('#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>');

程式碼會變成非常的長,而且不易維護!

如果使用

$('#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')
		)
	)
);

除了看起來結構明瞭,
以後維護起來也方便!


1 則留言

1
tony1223
iT邦新手 2 級 ‧ 2012-04-16 10:24:51

瀏覽器處理一串 html 的能力跟效率,遠勝於透過 jQuery 去一個一個細節設定。

如果今天這個案例只有一個元素影響並不大,
如果你今天是跑迴圈塞個一百個東西,影響就會比較明顯了。

原則上還是建議如果能夠集合成一群 html ,還是以 html 操作為主,
只是 html 的 string 組裝可以適當的排版。

意思就是就效能來說,第一種方式會比第二種的方式要好嗎? 不過第一種方式要是dom稍微複雜一點,會不會不好維護,例如說一個意見調查的表單,包含各種input的元素

fillano iT邦超人 1 級‧ 2012-04-18 13:12:32 檢舉

沒想到jQuery還可以這樣用composite的方式來增加dom元素。

我是覺得這樣就好像使用document.createElement還是innerHTML的爭議...不過以維護來說,我覺得是看個人...使用html、使用template、使用createElement、使用$做composite都是方法,關鍵還是使用的情境以及開發的流程。有些複雜的應用,說不定考慮用template還比動態調整DOM有彈性也易於維護。

至於表單的例子...我反而不傾向直接用jQuery,應該用更好的方式來包裝。看看能不能做出類似這樣的使用方法:

&lt;pre class="c" name="code">
var form = new Form({method:'post',action:'/comment.php'});
form.add(new Text({name:'email',size:'50'}));
form.add(new TextArea({name:'comment',width:'50',height:'20'}));
form.add(new Submit());
form.add(new Reset());
form.render("form_panel");

我們都知道這件事情上最麻煩的其實是字串的組裝,
所以如果是複雜一點的例子,你也可以考慮用 html 的方式作字串的存放

常見的用法是用一個瀏覽器看不懂的 script tag 像這樣,
再用 JS 去存取 template 的"字串",像這個例子。

&lt;pre class="c" name="code">
&lt;script type = "text/template" id="mytmp">
      &lt;div> &lt;!-- .... -->&lt;/div>
&lt;/script>

也有一些樣板引擎會加上比方說 <%= %> 之類的運算符。 (jQuery 的作者 John Resig 就有做一個http://ejohn.org/blog/javascript-micro-templating/ )

至於 template 之後對應到的特別需求,像是 data-attribute (可以用html5的方式給),
或是 event 的綁定(可以後來再另外針對需要來 bind 上去,或直接採用 delegate 。 )

這些都還可以另外作處理。

jQuery object 本身雖然方便,操作性也比較強,
但是如果是一定程度的亮的操作,做做最佳化效能上會好很多。

另一方面是, jquery object 這樣的組裝方式,
如果你需要抽換 tag 的層級的話,還是比 html 來得複雜。

我要留言

立即登入留言