Блог

Не уверен, что я упускаю что-то очевидное, поскольку это первый раз, когда я пытаюсь многое сделать с помощью необработанных DOM API (в отличие от jQuery или чего-то подобного).

Рассмотрим следующий код, в котором я вручную создаю TBODY с document.createElement, а затем устанавливаю для него значение 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>
  

В Chrome и FF это работает так, как я и предполагал — предоставление мне таблицы и т.д. Однако в IE9, похоже, отбрасываются первые HTML-теги в innerHTML. т.е. вместо

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

Я получаю

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

JSFiddle из приведенных выше:http://jsfiddle.net/pAJwu /

Есть идеи, что здесь происходит?

IE до версии 9 не поддерживает настройку innerHTML для некоторых элементов. Вот почему; ссылка также содержит возможный обходной путь.