當(dāng)前位置:軟件學(xué)堂 > 資訊首頁 > 網(wǎng)絡(luò)編程 > 編程其他 > 使用DOM實(shí)現(xiàn)控件的復(fù)制

使用DOM實(shí)現(xiàn)控件的復(fù)制

2012/11/11 15:55:55作者:佚名來源:網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

使用DOM實(shí)現(xiàn)控件的復(fù)制

【實(shí)例描述】

復(fù)制節(jié)點(diǎn)的目的就是實(shí)現(xiàn)div的拖曳效果,將內(nèi)容相同的DOM對(duì)象移動(dòng)到其他控件中。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>標(biāo)題頁-學(xué)無憂(yzddtk.cn)</title> <script type="text/javascript">  function test()     {         var mydom1=document.getElementById("divlist1"); //獲取指定ID的DOM對(duì)象         var mydom2=document.getElementById("divlist2"); //獲取指定ID的DOM對(duì)象         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>

【運(yùn)行效果】

初始運(yùn)行效果

使用DOM實(shí)現(xiàn)控件的復(fù)制運(yùn)行效果

復(fù)制后的效果

使用DOM實(shí)現(xiàn)控件的復(fù)制運(yùn)行效果

【難點(diǎn)剖析】

本例主要學(xué)習(xí)點(diǎn)還是JaVascript DoM對(duì)象的一些操作方法。用“appendchild”方法實(shí)現(xiàn)動(dòng)態(tài)添加元素,用“cloneNode”方法實(shí)現(xiàn)元素的復(fù)制。

【源碼下載】

為了JS代碼的準(zhǔn)確性,請(qǐng)點(diǎn)擊:使用DOM實(shí)現(xiàn)控件的復(fù)制 進(jìn)行本實(shí)例源碼下載 

標(biāo)簽: DOM實(shí)現(xiàn)  控件  復(fù)制