3.29 学前端 jquery之操作元素之文档处理

最新推荐文章于 2024-06-02 18:15:35 发布

yanga11ang

最新推荐文章于 2024-06-02 18:15:35 发布

阅读量154

点赞数

分类专栏： py_web_front end

本文链接：https://blog.csdn.net/yanga11ang/article/details/79740942

版权

py_web_front end 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

3.3 文档处理
内部插入

$("#c1").append("<b>hello</b>");//把hello插入#c1到最后一项
$("p").appendTo("div"); //包p插入到div中

prepend();//插入到最上面项
prependTo()

外部插入

before()
insertBefore()
after()
insertAfter()

replaceWith() 
remove()
empty()
clone()

实例 clone方法的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="outer">
        <div class="condition">
            <div class="icons" style="display:inline-block">
                <a onclick="add(this);"><button>+</button></a>
            </div>
            <div class="input" style="display:inline-block">
                <input type="checkbox">
                <input type="text" value="alex">
            </div>
        </div>
    </div>

    <script src="js/jquery-2.2.3.js"></script>
    <script>
        function add(self){
            var $duplicate = $(self).parent().parent().clone();
            $duplicate.find('a[onclick="add(this);"]').attr('onclick',"removed(this)").children("").text("-");
            $duplicate.appendTo($(self).parent().parent().parent());
        }
        function removed(self){
            $(self).parent().parent().remove()
        }
    </script>
</body>
</html>

yanga11ang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3.29 学前端 jquery之操作元素之文档处理

3.3 文档处理内部插入$("#c1").append("&lt;b&gt;hello&lt;/b&gt;");//把hello插入#c1到最后一项$("p").appendTo("div"); //包p插入到div中prepend();//插入到最上面项prependTo()外部插入before()insertBefore()after()insertAft
复制链接

扫一扫

专栏目录