js操作节点

最新推荐文章于 2023-05-11 11:05:57 发布

柠檬蟹

最新推荐文章于 2023-05-11 11:05:57 发布

阅读量72

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_43724569/article/details/125552251

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="mainDiv">
这是我们mainDiv
</div>
<h2>内部插入节点</h2>
<p>这个是P标签</p>
<div>
    <div>
        <p id="myp">这个是P标签</p>
    </div>
</div>

<button onclick="myappend()">添加节点</button>
<button onclick="myappendTo()">移动节点节点</button>
<button onclick="myPrepend()">插入到儿子节点第一个</button>
<button onclick="myPrependTo()">插入到儿子节点第一个</button>
<button onclick="myAfter()">插入到节点后面</button>
<button onclick="myInsertAfter()">插入到节点后面2</button>
<button onclick="myBefore()">插入到节点前面</button>
<button onclick="myInsertBefore()">插入到节点前面2</button>
<button onclick="myWrap()">包裹节点</button>
<button onclick="myUnWrap()">移出包裹节点</button>
<button onclick="myClone()">复制节点</button>
<button onclick="myRomve()">删除节点</button>
<button onclick="myRomveBABA()">删除节点BABA</button>
<button onclick="myreplace()">替换节点</button>
<script src="../jq/jquery-1.11.3.js"></script>
<script>
    //添加节点
    function myappend() {
        var newDiv = $("<div>我创造的新节点</div>")
        $("#mainDiv").append(newDiv).css({
            width:"300px",
            height:"200px",
            border:"1px solid red"
        })
        // 链式调用
    }
    //移动节点
    function myappendTo() {
        $("p").appendTo($("#mainDiv"))
    }
    //插入到节点前
    function myPrepend() {
        // 将span标签 插入到maindiv的儿子最前面
        $("#mainDiv").prepend("<span>我是span标签</span>")
    }
    function myPrependTo() {
        $("p").prependTo($("#mainDiv"))
    }
    //插入到节点后面
    function myAfter() {
        // 将p变成maindiv的紧邻的弟弟
        $("#mainDiv").after($("p"))
    }
    function myInsertAfter() {
        $("p").insertAfter($("#mainDiv"))
    }

    // 插入到节点前
    function myBefore() {
        // 让p标签变成maindiv的哥哥
        $("#mainDiv").before($("p"))
    }
    function myInsertBefore() {
        $("p").insertBefore($("#mainDiv"))
    }
    // 包裹节点
    function myWrap() {
        //分别给每个p标签加一个div爸爸
        // $("p").wrap("<div class='blue'></div>")
        // 把所有p标签都放入divBlue里面
        $("p").wrapAll("<div class='blue'></div>")
    }
    //移出包裹节点
    function myUnWrap() {
        // 让选中的p标签  删除一个爸爸  如果爸爸是body  则不删除
        $("p").unwrap()
    }
    function myClone() {
       $("p").clone().appendTo($("#mainDiv"))
        // clone(布尔值)
        // true:所有子节点
        // false:只有自己
       // $("#mainDiv").append($("p").clone())
    }
    function myRomve() {
        $("p").remove()  //只用找到自己  然后删除自己
    }
    function myRomveBABA() {
        $("#myp").parent().remove()
    }
    //替换节点
    function myreplace() {
        // replaceWith("sfsdfsdf")括号内可以是字符串可以是标签
        $("p").replaceWith("<h3>123</h3>")
    }
</script>
</body>
</html>