DOM節點的創建
//DOM節點的創建跟寫HTML結構的方式是一樣的
創建元素節點：$("<div></div>")
創建文本節點: $("<div>文本節點</div>")
創建屬性節點：$("<div id="text" class="text">文本節點</div>")
內部插入DOM節點
假設：<body>
<div id="demo"></div>
</body>
append(content|fn)與appendTo(content)：在匹配的元素的結束位置插入內容
append()：向每個匹配的元素內部追加內容。這個操作與對指定的元素執行appendChild方法，將它們添
加到檔案中的情況類似。
例：$("#demo").append("<p>段落標簽</p>");
appendTo()：把所有匹配的元素追加到另一個指定的元素元素集合中。實際上，使用這個方法是顛倒了常
規的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中
例：$("<p>段落標簽</p>").appendTo($("#demo "));
總結：.append()和.appendTo()兩種方法功能相同，主要的不同是語法——內容和目標的位置不同，
append()前面是被插入的物件，后面是要在物件內插入的元素內容
appendTo()前面是要插入的元素內容，而后面是被插入的物件
prepend(content)與prependTo(content)：在匹配的元素的開始位置插入內容
prepend()：向每個匹配的元素內部前置內容。這是向所有匹配元素內部的開始處插入內容的最佳方式。
例：$("#demo ").prepend("<p>段落標簽</p>");
prependTo()：把所有匹配的元素前置到另一個、指定的元素元素集合中。實際上，使用這個方法是顛倒了
常規的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。
例：$("<p>段落標簽</p>").prependTo ($("#demo "));
外部插入DOM節點
假設：<body>
<div id="demo"></div>
</body>
//引數說明：content 插入到每個目標后的內容 function 函式必須回傳一個html字串。
after(content|fn)與before(content|fn)
after()：在每個匹配的元素的后面插入內容。
例：$("#demo").after("<p>段落標簽</p>");
before()：在每個匹配的元素的前面插入內容。
例：$("#demo ").before("<p>段落標簽</p>");
//引數說明：content 用于匹配元素的jQuery運算式。
insertAfter(content)與insertBefore(content)
insertAfter()：把所有匹配的元素插入到另一個、指定的元素元素集合的后面。實際上，使用這個方法是
顛倒了常規的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。
例：$("<p>段落標簽</p>"). insertAfter ($("#demo "));
insertBefore()：把所有匹配的元素插入到另一個、指定的元素元素集合的前面。實際上,使用這個方法是
顛倒了常規的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面。
例：$("<p>段落標簽</p>"). insertBefore ($("#demo "));
DOM節點的洗掉empty()、remove()與detach()
empty()：洗掉匹配的元素集合中所有的子節點。
remove([expr])：從DOM中洗掉所有匹配的元素。引數說明：expr 用于篩選元素的jQuery運算式
empty()與remove()的區別：
empty()：嚴格地講，empty()方法并不是洗掉節點，而是清空節點，它能清空元素中的所有后代節點，empty
不能洗掉自己本身這個節點
remove()：該節點與該節點所包含的所有后代節點將同時被洗掉，提供傳遞一個篩選的運算式，洗掉指定
合集中的元素
detach()：這個方法不會把匹配的元素從jQuery物件中洗掉，因而可以在將來再使用這些匹配的元素。與
remove()不同的是，所有系結的事件、附加的資料等都會保留下來。$("div").detach()這一句
會移除物件，僅僅是顯示效果沒有了。但是記憶體中還是存在的。當你append之后，又重新回到
了檔案流中。就又顯示出來了。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/53050.html
標籤：非技術區
上一篇：阿里、京東、百度Java面試經驗+最新BAT面試資料分享給大家(小結)
下一篇：jQuery事件總結