在使用jQuery中,經常會用到append方法。它的作用是將新的HTML元素添加到指定的元素中。
比如說,下面的代碼將一個新的P標簽添加到ID為"container"的DIV中:
$(document).ready(function(){ $("#container").append("Hello World!
"); });
這個例子很簡單,但是在實際運用中,我們可能會遇到一些問題。有時候,我們會發現使用append方法時,新添加的元素會"丟失"。比如下面的代碼:
$(document).ready(function(){ var newText = $("Hello World!
"); $("#container").append(newText); console.log(newText); });
這個例子先創建了一個新的P標簽存放在變量newText中,然后將它添加到ID為"container"的DIV中。最后,使用console.log方法來檢查newText的值。
如果一切正常,我們會看到console里打印出來的是新的P標簽。但是,有時候我們得到的卻是undefined。這通常發生在我們想要對新添加的元素進行進一步操作的時候。
為什么會發生這種情況呢?這是因為jQuery的append方法實際上是將新的元素添加到DOM樹中,而不是添加到jQuery對象中。所以,如果我們想要對新添加的元素進行操作,我們需要重新查詢DOM樹。
$(document).ready(function(){ var newText = $("Hello World!
"); $("#container").append(newText); console.log($("#container").find(newText)); });
在這個例子中,我們使用了find方法來重新查詢DOM樹,以獲取新的P標簽對象。現在,console里打印出來的就是新添加的P標簽了。
總之,使用append方法時要注意,新添加的元素實際上是添加到DOM樹中的,而不是添加到jQuery對象中。如果需要對新添加的元素進行進一步操作,需要重新查詢DOM樹。
下一篇圖示css的構成