<html>
<head> <title>JQuery</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css" rel="external nofollow" >
-->
<script type="text/javascript" src="js/jquery-1.6.2.js"></script>
<script type="text/javascript">
function add(){
var obj = document.getElementById('lst1');
var opn = document.createElement("OPTION");
obj.appendChild(opn);//先追加
opn.innerText = 11;
opn.value = 11; }
function add1(){
var obj = document.getElementById('lst1');
var opn = document.createElement("OPTION");
opn.innerText = 11;
opn.value = 11;
obj.appendChild(opn);//后追加 ie7 会出问题 }
</script>
</head> <body>
<table style="width:500px;">
<tr>
<td style="width:100%;">
<select id="lst1" style="width:95%;">
<option>1</option>
</select>
</td>
</tr>
</table>
<input type="button" value="先追加" onclick="add();">
<input type="button" value="后追加" onclick="add1();">
</body>
</html>
代码不应该是先设置属性在追加,而应该是先追加再设置属性。
原因是 追加DOM要先追加 后设置属性,否则会有reflow发生。