JSLite - 插入节点方法

2018-12-07 00:37 更新

如有疑问欢迎到这些地方交流,欢迎加入JSLite.io组织团伙共同开发!

segmentfault社区 | 官方网站 | 官方文档-更详细 | Issues

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中的当前元素。
replaceWith(content|fn)

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

replaceWith

将所有匹配的元素替换成指定的HTML或DOM元素。

replaceWith(content|fn)

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

用第一段替换第三段,你可以发现他是移动到目标位置来替换,而不是复制一份来替换。

<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中利用一个参数来确定是否复制数据和事件处理不相同。)

$("body").append($("#box").clone())
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号