JSLite - 插入節點方法
如有疑問歡迎到這些地方交流,歡迎加入JSLite.io組織團體共同開發!
prepend
插入到標籤開始標記之後(裡面的第一個)。
prepend(content) ⇒ self
prepend(Function) ⇒ self
$("#box").prepend("dd") //⇒ self $("#box").prepend(function(){ return "asdfasdf" }) //⇒ self
prependTo
##將產生的內容插入到符合的節點標籤開始標記之後。這有點像prepend,但卻是相反的方式。
prependTo(selector) ⇒ self
$("<div>test</div>").prependTo("#box")
append
插入到標籤結束標記前(裡面的結尾)。
append(content) ⇒ self
append(Function) ⇒ self
$("#box").append("dd") //⇒ self $("#box").append(function(){ return "asdfasdf" }) //⇒ self
appendTo
#將產生的內容插入到符合的元素標籤結束標記前(裡面的最後)。這個有點像append,但是插入的目標與其相反。
appendTo(selector) ⇒ self
$("<div>test</div>").appendTo("#box")
after
插入到標籤結束標記後。 (兄弟節點的下面)
after(content) ⇒ self
after(Function) ⇒ self
$("#box").after("dd") //⇒ self $("#box").after(function(){ return "asdfasdf" }) //⇒ self
insertAfter
#插入的物件集合中的元素到指定的每個元素後面的dom。這個有點像
after
,但是使用方式相反。insertAfter(selector) ⇒ self
$("<p>test</p>").insertAfter("#box") //⇒ self $("#input").insertAfter("#box") //⇒ self $("#input")
before
插入到標籤開始前。
after(content) ⇒ self
after(Function) ⇒ self
$("#box").before($("input")) //⇒ self $("#box").before(function(){ return "asdfasdf" }) //⇒ self
insertBefore
#將產生的內容插入
selector
符合的節點標籤開始前。這個有點像before
,但是使用方式相反。insertBefore(selector) ⇒ self
$("<p>test</p>").insertBefore("#box")
unwrap
##移除集合中每個元素的直接父節點,並把他們的子元素保留在原來的位置。 基本上,這種方法刪除上一的祖先元素,同時保持DOM中的當前元素。replaceWithreplaceWith(content|fn)
$("p").unwrap() // ⇒ self
將所有符合的元素替換成指定的HTML或DOM元素。clone
replaceWith(content|fn)<div class="container">
<div class="inner first">Hello</div>
<div class="inner second">And</div>
<div class="inner third">Goodbye</div>
</div>
$(".third").replaceWith($(".first")); // ⇒ 返回 “.third” 节点
上面的结果<div class="container"> <div class="inner second">And</div> <div class="inner first">Hello</div> </div>
clone() ⇒ collection#透過深度克隆來複製集合中的所有元素。 (透過原生
cloneNode方法深度克隆來複製集合中的所有元素。此方法不會有資料和事件處理程序複製到新的元素。這點和jquery中利用一個參數來決定是否複製數據和事件處理不相同。