2012-11-11 来源:网络
【实例名称】
使用DOM实现控件的复制
【实例描述】
复制节点的目的就是实现div的拖曳效果,将内容相同的DOM对象移动到其他控件中。
【实例代码】
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧(www.xue51.com)</title> <script type="text/javascript"> function test() { var mydom1=document.getElementById("divlist1"); //获取指定ID的DOM对象 var mydom2=document.getElementById("divlist2"); //获取指定ID的DOM对象 mydom2.appendChild(mydom1.childNodes[0].cloneNode(true)); } </script> </head> <body> <form id="form1" runat="server"> <input id="btn1" type="button" value="test" onclick="test()"/> <div id="divlist1"><p>this is test1</p></div> <div id="divlist2"></div> </form> </body> </html>
【运行效果】
初始运行效果
复制后的效果
【难点剖析】
本例主要学习点还是JaVascript DoM对象的一些操作方法。用“appendchild”方法实现动态添加元素,用“cloneNode”方法实现元素的复制。
【源码下载】
为了JS代码的准确性,请点击:使用DOM实现控件的复制 进行本实例源码下载