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) ⇒ self
prepend(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) ⇒ self
append(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) ⇒ self
after(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) ⇒ self
after(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 likebefore
, 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 nativecloneNode
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())