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

2018-12-07 00:37 更新

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

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

prepend

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

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

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

prependTo

將生成的內(nèi)容插入到匹配的節(jié)點標(biāo)簽開始標(biāo)記之后。這有點像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)記前(里面的最后)。這個有點像append,但是插入的目標(biāo)與其相反。
appendTo(selector) ? self

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

after

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

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

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

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

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

insertBefore

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

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

unwrap

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

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

replaceWith

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

replaceWith(content|fn)

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

用第一段替換第三段,你可以發(fā)現(xiàn)他是移動到目標(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é)點



上面的結(jié)果

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

clone

clone() ? collection

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

$("body").append($("#box").clone())
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號