1.内部插入

append(content|fn) 追加当前元素的内容之后
appendTo(content) 与append前后位置颠倒
prepend(content|fn) 追加到当前元素的内容之前
prependTo(content)

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

$(".block").append(function (index,html) {
     //参数是当前索引和父元素的子元素（即当前元素的html)
     console.log(index, html);     //0  "<div class="child">1</div>"
     return $(".small")
 })
 
$(".small").appendTo($(".block"));

prepend与append区别
prepend是加到父元素中子元素内容之前
append是加到父元素中子元素内容之后

//在jquery里面创建dom
var doms=$("<div></div>");
doms.addClass("two");
//var doms=$("<div class='two'></div>")
$(".block").append(doms)

2.外部插入

after(content|fn) 同级元素之间，将内容加到其后
before(content|fn) 同级元素之间，将内容加到其前
insertAfter(content) 与after前后位置颠倒
insertBefore(content)

$(".child").after($(".small"));
$(".child").before($(".small"));
$(".child").after(function (index) {
    //只有一个参数
     console.log(index);
     //return $(".small")
     return "<div class='child2'></div>"
 })
$(".small").insertAfter($(".child"));
$(".small").insertBefore($(".child"));

3.包裹

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>") ; //匹配到的p各加一个div进行包裹
$("p").wrapAll("<div></div>") ; //匹配到的p(若在此中间还有别的元素，)一个div进行包裹
$("p").wrapInner("<div></div>");//匹配到的p的内容分别加div进行包裹
$("p").wrapInner(function (index) {
     console.log(index);
     return "<div></div>"`在这里插入代码片`
 })

4.替换

replaceWith(content|fn)
replaceAll(selector) 与replaceWith前后位置颠倒

var tihuan=$("<input type='text' class='common'/>");
tihuan.val($(".common").html()); //此处取到的值为：若多个相同元素则取的是第一个
$(".common").replaceWith(tihuan);

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

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

多个元素同时进行替换，替换值不同：

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

5.删除

empty() 将父元素中的所有子节点全部删除
remove([expr]) 将给定元素删除
detach([expr]) 只是从jquery对象中删除,删除元素之后， jquery 对象里面的没有删除，只是界面没有了，数据和事件之类的还在

$("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")); //jquery对象里面的没有删除   只是界面没有了   数据和事件之类的还在

6.复制

clone()

深度克隆：参数true，克隆dom元素以外还克隆了事件之类的
浅克隆：参数false，只是克隆了dom元素

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

来源：CSDN

作者：柚子～

链接：https://blog.csdn.net/weixin_45454695/article/details/104308989

标签

jquery

jquery事件