cloneNode是进行DOM操作经常使用的方法,有了它我们可以很容易的克隆一个跟原来一模一样的DOM对象,如:在动态增加table的行的时候,我们只需克隆一个table中现有的行,然后调用talbe.appendChild()方法就可以实现,而无需调用table繁琐的DOM操作方法。但是在开发中,我发现cloneNode在对select进行克隆时却无法克隆出当前选中的option,克隆出来的对象的options中拥有selected属性的永远都是第一个。
1 <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" > 2 < html > 3 < head > 4 < title > CloneNode.html </ title > 5 < script type ="text/javascript" > 6 function $(id){ 7 return document.getElementById(id); 8 } 9 10 window.onload = function(){11 document.body.appendChild($("txt").cloneNode(true));12 document.body.appendChild(document.createElement("<p>"));13 document.body.appendChild($("select").cloneNode(true));14 }15 </ script > 16 </ head > 17 < body > 18 < form > 19 < input type ="text" name ="txt" id ="txt" value ="测试一下CloneNode之后还有没有值" style ="width:300px" /> 20 < select id ="select" name ="select" > 21 < option value ="" > 请选择 </ option > 22 < option value ="1" selected > 1 </ option > 23 < option value ="2" > 2 </ option > 24 < option value ="3" > 3 </ option > 25 </ select > 26 </ form > 27 </ body > 28 </ html > 29下面是调用document.write($("select").cloneNode(true).outerHTML)后打印的HTML:
1 < SELECT id =select name =select > 2 < OPTION value ="" selected > 请选择 </ OPTION > 3 < OPTION value =1 > 1 </ OPTION > 4 < OPTION value =2 > 2 </ OPTION > 5 < OPTION value =3 > 3 </ OPTION > 6 </ SELECT >以上代码在FireFox下运行正常,但在IE中不正常!
相关资源:敏捷开发V1.0.pptx