dom11clone

最新推荐文章于 2024-06-25 20:23:09 发布

Kasekale

最新推荐文章于 2024-06-25 20:23:09 发布

阅读量171

点赞数

分类专栏： dom 文章标签： dom

本文链接：https://blog.csdn.net/Kasekale/article/details/78591125

版权

dom 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #div1{width: 100px;height: 100px;background-color: pink}
        #div2{width: 100px;height: 100px;background-color: purple}
    </style>
</head>
<body>
    <div id="box">
        <input type="button" value="点击clone" id="btn">
        <div   id="div1"></div>
        <hr    id="hr1">
        <div   id="div2">
            <p>I am language!!!</p>
        </div>
    </div>
    <script>
        /*需求:
            当点击按钮的时候,将紫色方块克隆到分割线上面;

            cloneNode() //克隆某个元素
            注意:
                在克隆的时候,默认只克隆指定元素本身,不会克隆该元素下的所有子节点,子孙节点,在参数里面(true)默认是false,即可克隆子孙节点啦.
                *事件是不会被克隆的(也可以解决的)

        */

        var btn = document.getElementById("btn");
        var pink = document.getElementById("div1");
        var purple = document.getElementById("div2");
        var box = document.getElementById("box");
        var hr = document.getElementById("hr1");

        btn.onclick = function(){

            var cloneElement = purple.cloneNode(true);
            console.log(cloneElement);
            box.insertBefore(cloneElement,hr);
        }
    </script>
</body>
</html>

这里写图片描述

Kasekale

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dom11clone

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #div1{width: 100px;height: 100px;background-color: pink} #div2{width: 100px;he
复制链接

扫一扫

专栏目录