jQuery文档处理之节点操作方法

jQuery学习

创建时间:2020-07-24 00:59

字数:415 阅读:

jQuery文档处理之节点操作方法

jQuery文档处理之节点操作方法

添加节点

内部插入：
append(content|fn)和 appendTo(content)：会将元素添加到指定元素内部的最后
prepend(content|fn)和prependTo(content)：会将元素添加到指定元素内部的最前面
外部插入：
after(content|fn)和insertAfter(content)：会将元素添加到指定元素外部的后面
before(content|fn)和insertBefore(content)：会将元素添加到指定元素外部的前面


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery添加节点相关方法</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $("button").click(function () {
                // 1.创建一个节点
                var $li = $("<li>新增的li</li>");
                // 2.添加节点
                $("ul").append($li);
                $("ul").prepend($li);

                // $li.appendTo("ul");
                // $li.prependTo("ul");


                // $("ul").after($li);
                // $("ul").before($li);
                // $li.insertAfter("ul");
            });
        });
    </script>
</head>
<body>
<button>添加节点</button>
<ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
</ul>
<div>我是div</div>
</body>
</html>

删除节点

remove([expr])：删除指定元素
empty()：删除指定元素的内容和子元素，指定元素自身不会被删除

替换节点

replaceWith(content|fn)和replaceAll(selector)：替换所有匹配的元素为指定的元素

复制节点

clone([Even[,deepEven]])：
如果传入false就是浅复制, 如果传入true就是深复制
浅复制：只会复制元素, 不会复制元素的事件，深复制：会复制元素, 而且还会复制元素的事件

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 2113132982@qq.com