<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"> --> <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="500px;"> <tr> <td style="100%;"> <select id="lst1" style="95%;"> <option>1</option> </select> </td> </tr> </table> <input type="button" value="先追加" onclick="add();"> <input type="button" value="后追加" onclick="add1();"> </body> </html>
代码不应该是先设置属性在追加，而应该是先追加再设置属性。
原因是 追加DOM要先追加 后设置属性，否则会有reflow发生。