1. Internal insertion

append(content|fn) after appending the content of the current element
appendTo(content) and append are reversed
prepend(content|fn) is appended before the content of the current element
prependTo(content)

$(".block").append($(".small"));

$(".block").append(function (index,html) {
     //The parameter is the child element of the current index and parent element (that is, the html of the current element)
     console.log(index, html);     //0  "<div class="child">1</div>"
     return $(".small")
 })
 
$(".small").appendTo($(".block"));

Difference between prepend and append
prepend is added before the child element content of the parent element
append is added after the child element content of the parent element

//Create dom in jquery
var doms=$("<div></div>");
doms.addClass("two");
//var doms=$("<div class='two'></div>")
$(".block").append(doms)

2. External insertion

after(content|fn) sibling elements, add content after
before(content|fn) sibling elements, adding content before them
insertAfter(content) and after are reversed
insertBefore(content)

$(".child").after($(".small"));
$(".child").before($(".small"));
$(".child").after(function (index) {
    //Only one parameter
     console.log(index);
     //return $(".small")
     return "<div class='child2'></div>"
 })
$(".small").insertAfter($(".child"));
$(".small").insertBefore($(".child"));

3. parcel

wrap(html|ele|fn) adds an HTML tag to each matched element for wrapping
unwrap() remove
Wrap all (html|ele) uses an HTML tag to wrap all matched elements (if there is another element in the middle, move it to the back directly)
wrapInner(html|ele|fn) wraps the content (or text) of matched elements with HTML tags respectively

var ele=$("<div class='par'></div>");
$(".small").wrap(ele)
$(".small").wrap("<div class='par'></div>");
$(".small").wrap(function (index) {
     return "<div class='par'></div>"
})

$(".child").unwrap();

$("p").wrap("<div></div>") ; //Add a div to each matched p for wrapping
$("p").wrapAll("<div></div>") ; //Matched top(If there are other elements in the middle,)One div Parcel
$("p").wrapInner("<div></div>");//The contents of the matched p are wrapped with div respectively
$("p").wrapInner(function (index) {
     console.log(index);
     return "<div></div>"`Insert a code slice here`
 })

4. replacement

replaceWith(content|fn)
replaceAll(selector) and replaceWith are reversed

var tihuan=$("<input type='text' class='common'/>");
tihuan.val($(".common").html()); //The value taken here is: if more than one identical element is taken, the first one is taken
$(".common").replaceWith(tihuan);

$(".common").replaceWith(function (index,html) {
     console.log(index, html);
     tihuan.val(html);
     return tihuan;
 })

tihuan.replaceAll($(".common"));

Multiple elements are replaced at the same time, with different replacement values:

$(".common").each(function () {
    var tihuan=$("<input type='text' class='common'/>");
    tihuan.val($(this).html());
    tihuan.replaceAll($(this))
})

5. delete

empty() deletes all child nodes in the parent element
remove([expr]) deletes the given element
detach([expr]) is only deleted from the jquery object. After deleting the elements, the contents of the jquery object are not deleted, but the interface is not, and the data and events are still there

$("ul").empty();
//$("ul>li").remove();
//$("ul>li").remove(".li3");
//$(".li3").detach();
// console.log($(".li3"));
// console.log($(".li3").html());  //undefined

//console.log($("ul>li").detach(".li3")); //The contents of the jquery object are not deleted, but the interface is still missing data and events

6. copy

clone()

Deep cloning: parameter true. Besides the dom element, events are cloned
Shallow clone: parameter false, only dom element is cloned

$(".small").clone(true).appendTo($(".block"));
//$(".small").clone().appendTo($(".block"));