JSLite - 插入節(jié)點(diǎn)方法

如有疑問歡迎到這些地方交流，歡迎加入JSLite.io組織團(tuán)伙共同開發(fā)！

segmentfault社區(qū) | 官方網(wǎng)站 | 官方文檔-更詳細(xì) | Issues

prepend

插入到標(biāo)簽開始標(biāo)記之后（里面的第一個(gè)）。

prepend(content) ? self
prepend(Function) ? self

$("#box").prepend("dd") //? self
$("#box").prepend(function(){
    return "asdfasdf"
}) //? self

prependTo

將生成的內(nèi)容插入到匹配的節(jié)點(diǎn)標(biāo)簽開始標(biāo)記之后。這有點(diǎn)像prepend，但是是相反的方式。

prependTo(selector) ? self

$("<div>test</div>").prependTo("#box")

append

插入到標(biāo)簽結(jié)束標(biāo)記前（里面的結(jié)尾）。

append(content) ? self
append(Function) ? self

$("#box").append("dd") //? self
$("#box").append(function(){
    return "asdfasdf"
}) //? self

appendTo

將生成的內(nèi)容插入到匹配的元素標(biāo)簽結(jié)束標(biāo)記前（里面的最后）。這個(gè)有點(diǎn)像append，但是插入的目標(biāo)與其相反。
appendTo(selector) ? self

$("<div>test</div>").appendTo("#box")

after

插入到標(biāo)簽結(jié)束標(biāo)記后。（兄弟節(jié)點(diǎn)的下面）

after(content) ? self
after(Function) ? self

$("#box").after("dd") //? self
$("#box").after(function(){
    return "asdfasdf"
}) //? self

insertAfter

插入的對(duì)象集合中的元素到指定的每個(gè)元素后面的dom中。這個(gè)有點(diǎn)像 after ，但是使用方式相反。

insertAfter(selector) ? self

$("<p>test</p>").insertAfter("#box") //? self
$("#input").insertAfter("#box")        //? self  $("#input")

before

插入到標(biāo)簽開始前。

after(content) ? self
after(Function) ? self

$("#box").before($("input")) //? self
$("#box").before(function(){
    return "asdfasdf"
}) //? self

insertBefore

將生成的內(nèi)容插入 selector 匹配的節(jié)點(diǎn)標(biāo)簽開始前。這個(gè)有點(diǎn)像 before，但是使用方式相反。
insertBefore(selector) ? self

$("<p>test</p>").insertBefore("#box")

unwrap

移除集合中每個(gè)元素的直接父節(jié)點(diǎn)，并把他們的子元素保留在原來的位置。 基本上，這種方法刪除上一的祖先元素，同時(shí)保持DOM中的當(dāng)前元素。
replaceWith(content|fn)

$("p").unwrap() // ? self

replaceWith

將所有匹配的元素替換成指定的HTML或DOM元素。

replaceWith(content|fn)

$("p").replaceWith("<b>段落。</b>");

用第一段替換第三段，你可以發(fā)現(xiàn)他是移動(dòng)到目標(biāo)位置來替換，而不是復(fù)制一份來替換。

<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” 節(jié)點(diǎn)

上面的結(jié)果

<div class="container">
  <div class="inner second">And</div>
  <div class="inner first">Hello</div>
</div>

clone

clone() ? collection

通過深度克隆來復(fù)制集合中的所有元素。(通過原生 cloneNode 方法深度克隆來復(fù)制集合中的所有元素。此方法不會(huì)有數(shù)據(jù)和事件處理程序復(fù)制到新的元素。這點(diǎn)和jquery中利用一個(gè)參數(shù)來確定是否復(fù)制數(shù)據(jù)和事件處理不相同。)

$("body").append($("#box").clone())