六、jQuery中动态创建dom元素

最新推荐文章于 2025-05-16 10:40:42 发布

云深๑不知处

最新推荐文章于 2025-05-16 10:40:42 发布

阅读量3.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： js jq dom操作文章标签： js jq dom操作

本文链接：https://blog.youkuaiyun.com/qq_44199845/article/details/87924559

js 同时被 3 个专栏收录

15 篇文章

订阅专栏

5 篇文章

订阅专栏

dom操作

2 篇文章

订阅专栏

本文深入讲解了使用jQuery进行DOM操作的方法，包括元素的创建、追加、克隆、替换、包裹及遍历等核心功能。通过实例展示了如何利用jQuery简化DOM操作，提高网页开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.创建dom元素
var txt=$(“1234”);
2.内部追加
（1）追加到当前父级元素内容之后

 // 父级元素.append(追加元素)
    $("#my").append(txt);

//追加元素.appendTo(父级元素)
txt.appendTo($("#my"));

//将原来里面的内容用一个新的标签包上
    $(".my").append(function(index,html){
        console.log(index);
        console.log($(this));
        var x=html;
        $(this).html("");
        var str=$("<span>"+x+"</span>");
        return str;
    });

 $(".my").each(function(index){
        var x;
        var str;
         x=$(this).html();
        str=$("<span>"+x+"</span>");
        $(this).html("").append(str);
    });

（2）追加到当前父级元素内容之前

 // 父级元素.prepend(追加元素)
    $("#my").prepend(txt);

    //追加元素.prependTo(父级元素)
    txt.prependTo($("#my"));

3.外部追加
（1）追加到当前父级元素内容之后

 // 父级元素.after(追加元素)
    $("#my").after(txt);

//追加元素.insertAfter(父级元素)
txt.insertAfter($("#my"));

（2）追加到当前父级元素内容之前

 // 父级元素.before(追加元素)
    $("#my").before(txt);

//追加元素.insertBefore(父级元素)
txt.insertBefore($("#my"));

4.克隆

 $("#my").append($("#my").clone());

=========

 $("#my").append($("#my").clone(false));
    
 $("#my").append($("#my").clone(true));

5.替换

 $("#my").children().replaceWith(txt);

6.包裹
（1）外部

 //单个包裹
    $(".my").wrap("<span></span>");

 //多个包裹
    $(".my").wrapAll("<span></span>");

（2）内部

$(".my").wrapInner("<span></span>");

（3）移除被包裹的父级元素

$("span").unwrap();
$("p").unwrap();

7.遍历
（1)each

$(".my").each(function (index, ele){});//index 索引 ele .btn对象

(2)在each 里面return false 提前终止遍历

 $(".my").each(function (index){
     $(this).click(function (){
     console.log(index);
     if(index==1)
     {
          return false;
     }
     console.log("你看看我");
     });
     });

在原生js中遍历数组用forEach for

 var s=[1,2,3];
    s.forEach(function(val,index){
        console.log(val);
        console.log(index);
    });