开发学院网页设计 JavaScript JavaScript学习笔记（7） IE环境下cloneNode的一个... 阅读

JavaScript学习笔记（7） IE环境下cloneNode的一个bug

　2010-09-14 13:29:55　来源：WEB开发网　　　

核心提示：cloneNode是进行DOM操作经常使用的方法，有了它我们可以很容易的克隆一个跟原来一模一样的DOM对象，JavaScript学习笔记（7） IE环境下cloneNode的一个bug，如：在动态增加table的行的时候，我们只需克隆一个table中现有的行，我发现cloneNode在对select进行克隆时却无法克隆

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<SELECTid=selectname=select> 2　　　　<OPTIONvalue=""selected>请选择</OPTION> 3　　　　<OPTIONvalue=1>1</OPTION> 4　　　　<OPTIONvalue=2>2</OPTION> 5　　　　<OPTIONvalue=3>3</OPTION> 6　　</SELECT>