section {
    display: block;
    background: #0F0;
    padding: 10px;
}

box1

定義されてない要素をinnerHTMLしてappendChildするとIEで失敗する。section, section1, /section という3つのノードに別れて追加されてスタイルが効かないなど。

var div1 = document.createElement('div');
div1.innerHTML = '<section>section1</section>';
document.getElementById('box1').appendChild(div1);

box2

createElementしてappendChildすれば大丈夫みたい

var box2 = document.getElementById('box2');
var section2 = document.createElement('section');
section2.innerHTML = 'section2';
box2.appendChild(section2);

box3

jQueryのappendもダメっぽい。

$('#box3').append('<section>section3</section>');

box4

htmlはいける。

$('#box4').html('<section>section4</section>');

box5

これだといける。createElement使ってるからかな。

$('#box5').append( $('<section>').text('section5') );

box6

これもいける。とにかくinnerHTMLとappendChildのコンボがダメみたい。

<section id="section_dummy"></section>

$('#box6').append( $('#section_dummy').text('section6') );

box7

innershiv.jsというの使えばこれでいけるらしい。
HTML 5 innerShiv

var div7 = document.createElement('div');
div7.appendChild( innerShiv('<section>section7</section>') );
document.getElementById('box7').appendChild(div7);

box8

jQueryのappendもいけちゃう。

$('#box8').append( innerShiv('<section>section8</section>') );