JSLite - insert node method


If you have any questions, you are welcome to communicate in these places, and you are welcome to join the JSLite.io organization team for joint development!

prepend

Insert after the tag opening tag (the first one inside).
prepend(content) ⇒ selfprepend(Function) ⇒ self

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

prependTo

will be generated Content is inserted after the matching node label start tag. This is a bit like prepend, but in reverse.
prependTo(selector) ⇒ self

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

append

is inserted before the end tag of the tag (the end inside).
append(content) ⇒ selfappend(Function) ⇒ self

$("#box").append("dd") //⇒ self

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

appendTo

will generate Content is inserted before (and last inside) the closing tag of the matching element tag. This is a bit like append, but the insertion goal is the opposite. appendTo(selector) ⇒ self

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

after

is inserted after the end tag of the tag. (Below the sibling node)
after(content) ⇒ selfafter(Function) ⇒ self

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

insertAfter

Insert the elements in the object collection into the dom behind each specified element. This is a bit like after, but used in the opposite way.
insertAfter(selector) ⇒ self

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

before

is inserted before the start of the tag.
after(content) ⇒ selfafter(Function) ⇒ self

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

insertBefore

will be generated Content is inserted into selector before the matching node label begins. This is a bit like before, but used in the opposite way. insertBefore(selector) ⇒ self

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

unwrap

Remove the direct parent node of each element in the collection and wrap their child elements Remain in original position. Basically, this method removes the previous ancestor element while keeping the current element in the DOM. replaceWith(content|fn)

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

replaceWith

Replace all matching elements with the specified HTML or DOM element.
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
Copy the collection through deep cloning of all elements. (Copy all elements in the collection through deep cloning of the native cloneNode method. This method will not copy data and event handlers to new elements. This is the same as using a parameter in jquery to determine whether to copy data. Not the same as event handling)

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