append with html string not working in IE8

append with html string not working in IE8

Hi,

What is the difference between calling append with html string vs dom object? It seems in IE8, the following code, append with html string does not work well while append with dom object works well. FF(I am using 3.6.13) does not have this problem.

Anyone has the same issue?

Thanks,
Stone
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
    <title>test001</title>
    <script type="text/javascript">

    $(document).ready(function() {

    $("#test1").append("<select></select>");
    $("#add1").click(function() {
        $("#test1").children("select").append("<option>aaa</option>");
    });


    $("#test2").append(document.createElement("select"));
    $("#add2").click(function() {

        $("#test2").children("select").append("<option>aaa</option>");
    });

    });

    </script>
    </head>

    <body>

    <h1>Test 1</h1>
    <div id="test1"></div>
    <button id="add1">add</button>
    <hr />

    <h1>Test 2</h1>
    <div id="test2"></div>
    <button id="add2">add</button>

    </body>

    </html>