jQuery-创建、删除、复制、替换、包裹节点

最新推荐文章于 2020-04-29 13:41:25 发布

Annaluo

最新推荐文章于 2020-04-29 13:41:25 发布

阅读量784

点赞数

本文链接：https://blog.csdn.net/Annaluo/article/details/78041221

版权

jQuery 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建删除复制替换包裹节点</title>
    <script src="../libs/jquery.js"></script>
</head>
<body>
<p title="选择你最喜欢的水果">你最喜欢的水果是？</p>
<ul>
    <li title='苹果'>苹果</li>
    <li title='橘子'>橘子</li>
    <li title='菠萝'>菠萝</li>
</ul>

<script>
    $("html");  //$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回
    //首先创建两个Li 元素
    var $li_1 = $("<li></li>"); //创建第一个li元素
    var $li_2 = $("<li></li>"); //创建第二个Li元素
    //然后将这两个新元素插入文档中
    $("ul").append($li_1);  //添加到ul节点中，使之能在网页中显示
    $("ul").append($li_2);  //可以采取链式写法:$("ul").append($li_1).append($li_2)
    //为创建的元素节点添加文本内容
    var $li_1 = $("<li>香蕉</li>");//香蕉就是创建的文本节点
    var $li_2 = $("<li>雪梨</li>");
    $("ul").append($li_1);  //添加到ul节点中，使之能在网页中显示
    $("ul").append($li_2);  //添加到ul节点中，使之能在网页中显示
    //创建属性节点
    var $li_1 = $("<li title='香蕉'>香蕉</li>");
    var $li_2 = $("<li title='雪梨'>雪梨</li>");
    $("ul").append($li_1);
    $("ul").append($li_2);

    //删除节点remove(),detach(),empty()三种方法

    /*$("ul li:eq(1)").remove();//获取第二个Li元素节点后，将它从网页中删除
    $("ul li").remove("li[title!=菠萝]");//将Li元素中属性title不等于菠萝的Li元素删除*/

    /*$("ul li").click(function () {
        alert($(this).html());
    })
    var  $li = $("ul li:eq(1)").detach();//删除第二个元素
    $li.appendTo("ul");//重新追加此元素，发现它之前绑定的事件还在，如果使用remove（）方法删除元素的话，那么它之前绑定的事件将失效*/

    //$("ul li:eq(1)").empty();//获取第二个Li元素节点后，清空此元素里的内容，注意是元素里。严格来讲，empty（）方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点

    //复制节点
    /*$("ul li").click(function () {
        $(this).clone().appendTo("ul");//复制当前单击的节点，并将它追加到ul元素中.，也就是说当点击最后一个li内容时，该内容将会被复制
    })
    $(this).clone(true).appendTo("body");//注意参数TRUE，因为新复制出来的元素不具有任何行为，添上这段代码之后就具有复制前的功能*/

    //替换节点 replaceWith()和replaceAll()，注意：如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。
    /*$("p").replaceWith("<strong>你最不喜欢的水果是？</strong>");//将所有匹配的元素都替换成指定的HTML或者DOM元素*/
    /*$("<strong>你最不喜欢的水果是？</strong>").replaceAll("p");*/


    //包裹节点
    $("strong").wrap("<b></b>")//用b标签把strong元素包裹起来
</script>
</body>
</html>

Annaluo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery-创建、删除、复制、替换、包裹节点

创建删除复制替换包裹节点你最喜欢的水果是？苹果橘子菠萝 $("html"); //$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回 //首先创建两个Li 元素 var $li_1 = $(""); //创建第一个li元素 var $li_2
复制链接

扫一扫