Javascript document.createElement или HTML-теги

Я запутался в следующем стиле написания кода. Я хочу знать, какой практический и эффективный способ вставить HTML-тег в документ.

JavaScript:

document.getElementById('demoId').innerHTML='<div>hello world and <a>click me</a> also</div>';

ИЛИ

var itd=document.createElement('div'),
    ita=document.createElement('a'),
    idt=document.createTextNode('hello world');
    iat=document.createTextNode('click me');
    idn=document.createTextNode('also');

    ita.appendChild(iat);
    itd.appendChild(idt);
    itd.appendChild(ita);
    itd.appendChild(idn)

    docuemtn.getElementById('demoId').appendChild(itd);

Какой самый быстрый и лучший метод?

Ответы

Ответ 1

Просто подумайте о том, что делает каждый из них. Первый из них берет строку, анализирует ее, а затем вызывает document.createElement, document.appendChild и т.д. (Или аналогичные методы) на основе вывода из разобранной строки. Во-вторых, сокращение рабочей нагрузки в браузере, поскольку вы прямо заявляете, что хотите.

Посмотрите сравнение на jsPerf

В соответствии с jsPerf вариант 1 примерно в 3 раза медленнее, чем вариант 2.

По вопросу о поддерживаемости вариант 1 гораздо проще писать, но назовите меня старомодным, я бы предпочел использовать вариант 2, поскольку он чувствует себя намного безопаснее.

Edit

После того, как началось несколько результатов, разные результаты вызвали мое любопытство. Я проверил тест дважды с каждым из установленных браузеров. Вот скриншот результатов из jsPerf после всех тестов (операции/секунда, выше - лучше).

jsPerf results

Таким образом, браузеры, похоже, сильно отличаются друг от друга тем, как они обрабатывают эти два метода. В среднем вариант 2, по-видимому, быстрее из-за большого варианта Chrome и Safari, предпочитающего вариант 2. Мой вывод состоит в том, что мы должны просто использовать то, что лучше всего подходит или лучше всего соответствует вашим стандартам организации, а не беспокоиться о том, что более эффективно.

Главное, что это упражнение научит меня: не использовать IE10, несмотря на то, что я слышал об этом.