javascript - IE9 createElement and setting innerHTML dropping tags on a set operation? - Stack Overflow

admin管理员组

文章数量:1379594

Not sure if I am missing something obvious, as this is the first time I've tried to do much with raw DOM apis (as opposed to via jQuery, or such).

Consider the following code, where I manually create a TBODY with document.createElement and then set it's innerHTML.

<table id="myTable">
</table>

<script type='text/javascript'>
    var row = "<tr><td><span>col1</span></td><td>col2</td></tr>";
    var render = function(){
        var table = document.getElementById('myTable');
        var tbody = document.createElement('tbody');
        tbody.innerHTML = row;
        table.appendChild(tbody);

        console.log(tbody.innerHTML);
    };

    $(document).ready(function(){
        render();
    });
</script>

In Chrome and FF, this works as I thought it would - giving me a table, etc. However, in IE9, it seems the first HTML tags in the innerHTML are being dropped. i.e., instead of

<TR><TD><SPAN>col1</SPAN></TD><TD>col2</TD></TR>

I get

<SPAN>col1</SPAN></TD><TD>col2</TD></TR>

A JSFiddle of the above: /

Any idea what's going on here?

Not sure if I am missing something obvious, as this is the first time I've tried to do much with raw DOM apis (as opposed to via jQuery, or such).

Consider the following code, where I manually create a TBODY with document.createElement and then set it's innerHTML.

<table id="myTable">
</table>

<script type='text/javascript'>
    var row = "<tr><td><span>col1</span></td><td>col2</td></tr>";
    var render = function(){
        var table = document.getElementById('myTable');
        var tbody = document.createElement('tbody');
        tbody.innerHTML = row;
        table.appendChild(tbody);

        console.log(tbody.innerHTML);
    };

    $(document).ready(function(){
        render();
    });
</script>

In Chrome and FF, this works as I thought it would - giving me a table, etc. However, in IE9, it seems the first HTML tags in the innerHTML are being dropped. i.e., instead of

<TR><TD><SPAN>col1</SPAN></TD><TD>col2</TD></TR>

I get

<SPAN>col1</SPAN></TD><TD>col2</TD></TR>

A JSFiddle of the above: http://jsfiddle/pAJwu/

Any idea what's going on here?

• javascript
• dom
• internet-explorer-9

Share Improve this question Follow asked Nov 11, 2011 at 16:41 MattMatt 41.9k3030 gold badges111111 silver badges149149 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

IE up to version 9 doesn't support setting innerHTML on some elements. Here's why; the link also includes possible workaround.

本文标签： javascriptIE9 createElement and setting innerHTML dropping tags on a set operationStack Overflow