JavaScript学习(7) IE环境下cloneNode的一个bug

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中不正常!

neptune -
共有0个回答