Привильное добавление элементов с помощью js
 

Доброе время суток!

Есть див:

<div id="div1">
</div>

Подскажите в чем разница между вот этими двумя способами добавления элементов.

1.

var div1=document.getElementById('div1'),span1=document.createElement('span');
span1.id='span1'
span.className='span1-class'
div1.appendChild(span1)

и

2.

var div1=document.getElementById('div1');
div1.innerHTML='<span class="span1-class" id="span1"></span>'

В чем разница, если отбросить тот факт, что appendChild() добавляет элемент в конец родителя, а innerHTML просто вставит его в родителя.

Я очень часто добавляю элементы вторым способом и теперь задумался над тем как бы их правильно в дальнейшем понимал браузер и обходилось без ошибок.

И каким способом вообще правильней добавлять элементы используя js.

Заранее спасибо за ответы!