JAVAWEB第四天操作dom树

最新推荐文章于 2022-07-19 19:59:28 发布

Alex十年

最新推荐文章于 2022-07-19 19:59:28 发布

阅读量388

点赞数

分类专栏： JAVAWEB

本文链接：https://blog.csdn.net/ilikejj0/article/details/78671841

版权

JAVAWEB 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

一、 appendChild();方法，对于以下案例，会把div1中的剪切，然后复制到div2中，div1中将不存在ul列表

<head>
<style type="text/css">
            #div1{width:200px;height: 200px;border:1px solid gray;}
            #div2{width:200px;height: 200px;border:1px solid royalblue;}
</style>
</head>
    <body>
        <div id="div1">
        <ul id="ul1">
            <li>刘亦菲</li>
            <li>章子怡</li>
            <li>林俊杰</li>
        </ul>
        </div>

        <div id="div2">

        </div>
        <button value="添加" onclick="add1();">添加</button>
    </body>
    <script>
        function add1(){
            //得到div2
            var div2=document.getElementById("div2");
            //获取ul
            var ul1=document.getElementById("ul1");
            //把ul添加到div2中
            div2.appendChild(ul1);
        }
    </script>

二、insertBefore(newNode,oldNode);在一个节点之前添加一个新的节点。注意：没有在一个节点之后添加节点的方法

<body>
        <ul id="ul1">
            <li id="li1">刘亦菲</li>
            <li id="li2">章子怡</li>
            <li id="li3">林俊杰</li>
        </ul>
        <button value="添加" onclick="add2();">在章子怡之前添加一个人</button>
</body>
    <script>
        function add2(){
            //创建一个li标签
            var li4=document.createElement("li");
            //创建文本
            var text1=document.createTextNode("唐嫣");
            //把文本添加到标签下面
            li4.appendChild(text1);
            //获取ul,因为这些是属于ul的
            var ul1=document.getElementById("ul1");
            //把li4添加到li2之前 insertBefore(NewNode,OldNode)
            ul1.insertBefore(li4,li2);
        }
    </script>

三、removeChild();通过要被删除的节点的父节点来执行该方法

<body>
        <ul id="ul1">
            <li id="li1">刘亦菲</li>
            <li id="li2">章子怡</li>
            <li id="li3">林俊杰</li>
        </ul>
        <button value="添加" onclick="remove1();">removechild林俊杰</button>
</body>
    <script>
        function remove1(){
            //获取ul
            var ul1=document.getElementById("ul1");
            //获取要删除的li
            var li3=document.getElementById("li3");
            //执行remove
            ul1.removeChild(li3);
        }
    </script>

四、replaceChild(newNode,oldNode);替换节点，必须通过父节点才能进行替换

<body>
        <ul id="ul1">
            <li id="li1">刘亦菲</li>
            <li id="li2">章子怡</li>
            <li id="li3">林俊杰</li>
        </ul>
        <button value="添加" onclick="replace1();">replaceChild林俊杰</button>
</body>
    <script>
        function replace1(){
            //创建一个li标签
            var li4=document.createElement("li");
            //创建文本
            var text1=document.createTextNode("唐嫣");
            //把文本添加到标签下面
            li4.appendChild(text1);
            //获取ul,因为这些是属于ul的
            var ul1=document.getElementById("ul1");
            //获取林俊杰li
            var li3=document.getElementById("li3");
            //开始进行替换
            ul1.replaceChild(li4,li3);
        }
    </script>

五、cloneNode(boolean);复制节点,里面为true或者false，true为复制，其操作的为副本，所以之前的列表仍然存在，和本文中第一个有区别

<head>
        <meta charset="UTF-8">
        <title></title> 
    <style type="text/css">
            #div1{width:200px;height: 200px;border:1px solid gray;}
            #div2{width:200px;height: 200px;border:1px solid royalblue;}
    </style>
</head>
    <body>
        <div id="div1">
        <ul id="ul1">
            <li>刘亦菲</li>
            <li>章子怡</li>
            <li>林俊杰</li>
        </ul>
        </div>

        <div id="div2">

        </div>
        <button value="添加" onclick="add1();">添加</button>
    </body>
    <script>
        function add1(){
            //得到div2
            //var div2=document.getElementById("div2");
            //获取ul
            var ul1=document.getElementById("ul1");
            //执行复制方法
            var copyul1=ul1.cloneNode(true);
            //把copyul1添加到div2中
            div2.appendChild(copyul1);
        }
    </script>

Alex十年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JAVAWEB第四天操作dom树

一、 appendChild();方法，对于以下案例，会把div1中的剪切，然后复制到div2中，div1中将不存在ul列表<head><style type="text/css"> #div1{width:200px;height: 200px;border:1px solid gray;} #div2{width:200px;height: 20
复制链接

扫一扫