Переваги createElement перед innerHTML?

На практиці, які переваги використання createElement перед innerHTML? Я запитую, бо я впевнений, що використання innerHTML є більш ефективним з точки зору продуктивності та читабельності / ремонтопридатності коду, але мої товариші по команді вирішили використовувати createElement як підхід до кодування. Я просто хочу зрозуміти, як createElement може бути більш ефективним.

Є кілька переваг використання createElementзамість модифікації innerHTML(на відміну від того, щоб просто викинути те, що вже є, і замінити), крім безпеки, як уже згадував Пекка:

Зберігає існуючі посилання на елементи DOM при додаванні елементів

Коли ви додаєте (або іншим чином змінюєте) innerHTML , усі вузли DOM всередині цього елемента повинні бути повторно проаналізовані та відтворені. Якщо ви зберегли будь-які посилання на вузли, вони по суті будуть марними, оскільки вони вже не відображаються.

Зберігає обробники подій, приєднані до будь-яких елементів DOM

Це насправді лише окремий випадок (хоча і загальний) останнього. Налаштування innerHTMLне буде автоматично приєднувати обробники подій до нових елементів, які він створює, тому вам доведеться самостійно їх відстежувати та додавати вручну. Делегування подій може усунути цю проблему в деяких випадках.

У деяких випадках може бути простішим / швидшим

Якщо ви робите багато доповнень, ви точно не хочете продовжувати скидання налаштувань, innerHTMLоскільки, хоча це швидше для простих змін, багаторазовий повторний аналіз та створення елементів буде повільнішим. Спосіб обійти це складання HTML у рядку та встановлення innerHTMLодного разу, коли закінчите. Залежно від ситуації, обробка рядків може бути повільнішою, ніж просто створення елементів та їх додавання.

Крім того, код обробки рядків може бути складнішим (особливо якщо ви хочете, щоб він був безпечним).

Ось функція, яку я іноді використовую, робить її зручнішою у використанні createElement.

function isArray(a) {
    return Object.prototype.toString.call(a) === "[object Array]";
}

function make(desc) {
    if (!isArray(desc)) {
        return make.call(this, Array.prototype.slice.call(arguments));
    }

    var name = desc[0];
    var attributes = desc[1];

    var el = document.createElement(name);

    var start = 1;
    if (typeof attributes === "object" && attributes !== null && !isArray(attributes)) {
        for (var attr in attributes) {
            el[attr] = attributes[attr];
        }
        start = 2;
    }

    for (var i = start; i < desc.length; i++) {
        if (isArray(desc[i])) {
            el.appendChild(make(desc[i]));
        }
        else {
            el.appendChild(document.createTextNode(desc[i]));
        }
    }

    return el;
}

Якщо ви називаєте це так:

make(["p", "Here is a ", ["a", { href:"http://www.google.com/" }, "link"], "."]);

ви отримуєте еквівалент цього HTML:

<p>Here is a <a href="http://www.google.com/">link</a>.</p>

Хоча це innerHTMLможе бути швидше, я не згоден з тим, що це краще з точки зору читабельності чи обслуговування. Може бути коротше розмістити все в одному рядку, але коротший код не завжди є більш ремонтопридатним.

Конкатенація рядків просто не масштабується, коли потрібно створювати динамічні елементи DOM, оскільки розкриття та закриття пропозицій та закриття пропозицій стає важким для відстеження. Розглянемо ці приклади:

Отриманий елемент являє собою div з двома внутрішніми інтервалами, вміст яких динамічний. Одне з імен класів (воїн) усередині першого прольоту також є динамічним.

<div>
    <span class="person warrior">John Doe</span>
    <span class="time">30th May, 2010</span>
</div>

Припустимо, що такі змінні вже визначені:

var personClass = 'warrior';
var personName = 'John Doe';
var date = '30th May, 2010';

Використовуючи лише innerHTML і збиваючи все в один рядок, ми отримуємо:

someElement.innerHTML = "<div><span class='person " + personClass + "'>" + personName + "</span><span class='time'>" + date + "</span></div>";

Вищезгаданий безлад можна очистити, використовуючи заміну рядків, щоб уникнути кожного разу відкриття та закриття рядків. Навіть для простих замін тексту я віддаю перевагу використаннюreplace замість конкатенації рядків.

Це проста функція, яка приймає об'єкт ключів та значень заміни та замінює їх у рядку. Він передбачає, що клавіші мають префікс, $щоб позначити їх як особливе значення. Він не виконує жодних екрануючих ситуацій та не обробляє випадків краю, коли це $відображається у значенні заміни тощо.

function replaceAll(string, map) {
    for(key in map) {
        string = string.replace("$" + key, map[key]);
    }
    return string;
}

var string = '<div><span class="person $type">$name</span><span class="time">$date</span></div>';
var html = replaceAll(string, {
    type: personClass,
    name: personName,
    date: date
});
someElement.innerHTML = html;

Це можна поліпшити, відокремлюючи атрибути, текст тощо під час побудови об'єкта, щоб отримати більш програмний контроль над побудовою елемента. Наприклад, за допомогою MooTools ми можемо передавати властивості об'єкта як карту. Це, безумовно, є більш ремонтопридатним, і я б стверджував, що це також читабельніше. jQuery 1.4 використовує подібний синтаксис для передачі карти для ініціалізації об'єктів DOM.

var div = new Element('div');

var person = new Element('span', {
    'class': 'person ' + personClass,
    'text': personName
});

var when =  new Element('span', {
    'class': 'time',
    'text': date
});

div.adopt([person, when]);

Я б не назвав чистий підхід DOM нижче більш читабельним, ніж описаний вище, але він, безумовно, більш ремонтопридатний, оскільки нам не потрібно відстежувати відкриття / закриття котирувань та численних знаків плюса.

var div = document.createElement('div');

var person = document.createElement('span');
person.className = 'person ' + personClass;
person.appendChild(document.createTextNode(personName));

var when = document.createElement('span');
​when.className = 'date​​​​​​';
when.appendChild(document.createTextNode(date));

​div.appendChild(person);
div.appendChild(when);

Найчитабельніша версія, швидше за все, буде результатом використання якогось шаблону JavaScript .

<div id="personTemplate">
    <span class="person <%= type %>"><%= name %></span>
    <span class="time"><%= date %></span>
</div>

var div = $("#personTemplate").create({
    name: personName,
    type: personClass,
    date: date
});

Користувач bobince дуже-дуже добре ставить ряд мінусів у своїй критиці jQuery .

... Крім того, ви можете створити div, сказавши $ ('' + message + ''), замість того, щоб мутитися з document.createElement ('div') та текстовими вузлами. Ура! Тільки ... тримайся. Ви не уникли цього HTML, і, напевно, щойно створили отвір безпеки між сценаріями між сайтами, цього разу лише на стороні клієнта. І після того, як ви витратили стільки часу на очищення PHP, щоб використовувати htmlspecialchars і на стороні сервера. Який сором. Ну добре, нікого насправді не хвилює правильність чи безпека, правда?

jQuery не цілком винна в цьому. Зрештою, властивість innerHTML існує вже багато років і вже виявилася популярнішою, ніж DOM. Але бібліотека, безумовно, заохочує такий стиль кодування.

Що стосується продуктивності: InnerHTML, безумовно, буде повільнішим, оскільки його потрібно проаналізувати та внутрішньо перетворити на елементи DOM (можливо, за допомогою createElementметоду).

InnerHTML працює швидше у всіх браузерах відповідно до тесту quirksmode, наданого @Pointy.

Що стосується читання і простоти використання, ви знайдете мене вибір innerHTMLчерез createElementбудь-який день тижня в більшості проектів. Але, як бачите, є багато моментів, за які висловлюєтесь createElement.

Вам слід використовувати createElement, якщо ви хочете зберегти посилання у своєму коді. InnerHTML іноді може створити помилку, яку важко помітити.

HTML-код:

<p id="parent">sample <span id='test'>text</span> about anything</p>

Код JS:

var test = document.getElementById("test");

test.style.color = "red"; //1 - it works

document.getElementById("parent").innerHTML += "whatever";

test.style.color = "green"; //2 - oooops

1) ви можете змінити колір

2) ти вже не можеш змінити колір або щось інше, тому що у рядку вище ти щось додав до innerHTML, і все відтворено, і ти маєш доступ до чогось, що вже не існує. Для того , щоб змінити його , ви повинні знову getElementById .

Потрібно пам’ятати, що це також впливає на будь-які події. Вам потрібно повторно застосувати події.

InnerHTML чудовий, оскільки його швидше та легше читати, але ви повинні бути обережними та використовувати його з обережністю. Якщо ви знаєте, що робите, з вами все буде в порядку.

Інший варіант - це літеральні шаблони (рядки шаблонів).

const container = document.getElementById("container");

const item_value = "some Value";

const item = `<div>${item_value}</div>`

container.innerHTML = item;