У DOM есть свои преимущества и недостатки, также, как и у innerHTML.
Преимущества innerHTML:
Нет особой заморочки с созданием текстовых и прочих элементов в DOM-модели документа.
Недостаток innerHTML:
Все обработчики событий самоуничтожаются при записи данных через innerHTML.
Преимущества appendChild:
Сохранение всех обработчиков событий, меньше конфликтов с разными браузерами.
Главный недостаток:
Нельзя просто взять кусок html-кода, например
CODE:var txt = "<div id='objid'>Бла-бла-бла</div>"
и вставить его в другой блок через appendChild. Придётся писать что-то типа
CODE:
var bl = document.createElement("div");
bl.id = "objid";
document.getElementById("anotherid").appendChild(bl);
А что если мне нужно вставлять теги не одного уровня вложности, а нескольких? Придётся писать функцию разбора строки на элементы, разбора этих элементов на составляющие, типа названия тега и пр...
Так где же она, золотая середина?