JSLite - 插入節點方法


如有疑問歡迎到這些地方交流,歡迎加入JSLite.io組織團體共同開發!

prepend

插入到標籤開始標記之後(裡面的第一個)。
prepend(content)  ⇒ selfprepend(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)  ⇒ selfappend(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)  ⇒ selfafter(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)  ⇒ selfafter(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中的當前元素。

replaceWith(content|fn)

$("p").unwrap() // ⇒ self
replaceWith

將所有符合的元素替換成指定的HTML或DOM元素。


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

clone()   ⇒ collection

#透過深度克隆來複製集合中的所有元素。 (透過原生
cloneNode 方法深度克隆來複製集合中的所有元素。此方法不會有資料和事件處理程序複製到新的元素。這點和jquery中利用一個參數來決定是否複製數據和事件處理不相同。