<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="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發生。