JavaScript克隆图片

来源:互联网 发布:ucloud云计算校园招聘 编辑:程序博客网 时间:2024/06/13 06:51
<html>    <head>        <meta charset="utf-8">        <title></title>        <style type="text/css">            #did {                width: 400px;                height: 200px;                border: 1px solid blue;            }        </style>    </head>    <body>        <div id="did">        </div>        <br/>        <div id="mid">            <img src="images/11.jpg" width="100" />            <img src="images/22.jpg" width="100" />            <img src="images/33.jpg" width="100" />            <img src="images/44.jpg" width="100" />        </div>        <script type="text/javascript">            var did = document.getElementById("did");            var list = document.getElementById("mid").getElementsByTagName("img");            for(var i = 0; i < list.length; i++) {                //当双击图片的时候将图片添加到div中(将图片克隆下来,然后追加到div中的子节点中)                list[i].ondblclick = function() {                    did.appendChild(this.cloneNode())                }            }        </script>    </body></html>

这里写图片描述

0 0