Как добавлять сложные HTML блоки?

Question

[AlexandrMa]

При создании каждого отдельного элемента и добавления его в главный элемент уходит очень много времени.

let div = document.createElement('div');
div.id = 'dialog';

let h2 = document.createElement('h2');
h2.textContent = 'Заголовок';
div.appendChild(h2);

let p_1 = document.createElement('p');
div.appendChild(p_1);

let p_2 = document.createElement('p');
div.appendChild(p_2);

let p_3 = document.createElement('p');
div.appendChild(p_3);

let h2_2 = document.createElement('h2');
h2_2 .textContent = 'Заголовок 2';
div.appendChild(h2_2);

document.body.appendChild(div);

Во первых очень много кода. Во вторых ещё и путаница в названиях переменных: p_1, p_2, p_3, h2, h2_2, а переназначать не даёт.

Можно ли как-то более простым способом внедрять куски кода? Или хотя бы как переменные переназначать, чтобы не было уникальных имен на каждое поле?

Почему-то часто советуют не использовать innerHTML, хотя так совсем просто добавить.

Comments

[edward_freedom]

а переназначать не даёт.

в смысле?

[AlexandrMa]

edward_freedom,

let div = document.createElement('div');
div.class = 'close';
//appendChild

let div = document.createElement('div');
div.textContent = 'Text';
//appendChild

ругается на то, что второй элемент

[WbICHA]

AlexandrMa, почитай про объявление и переиспользование переменных...

[Egor Sabyanin]

AlexandrMa, у тебя повторная декларация, а не переопределение.

Answer 1

[Egor Sabyanin]

let comment = `
<div class="comment">
    <div class="comment-avatar"></div>
    <div class="comment-description"></div>
</div>
`;

document.body.append(comment);

Можно так добавлять, но этот способ не безопасный

Answer 2

[edward_freedom]

Можно так сделать

let html = [
        {
            'type': 'div',
            'args': {
                'id': 'dialog',
            },
            'childrens': [
                {
                    'type': 'h1',
                    'args': {
                        'textContent': 'Заголовок 1'
                    }
                },
                {
                    'type': 'h2',
                    'args': {
                        'textContent': 'Заголовок 2'
                    }
                },
                {
                    'type': 'h5',
                    'args': {
                        'textContent': 'Заголовок 5'
                    }
                },
                {
                    'type': 'p',
                    'args': {
                        'textContent': 'Параграф'
                    }
                },
            ]
        }
    ];

    html.forEach(parent => {
        let parentObject = document.createElement(parent.type);
        Object.entries(parent.args).forEach(([key, value]) => {
            parentObject[key] = value;
        });
        parent.childrens.forEach(children => {
            let childrenObject = document.createElement(children.type);
            Object.entries(children.args).forEach(([key, value]) => {
                childrenObject[key] = value;
            });
            parentObject.appendChild(childrenObject);
        });
        document.body.appendChild(parentObject);
    });

Comments

[Stalker_RED]

Начнем с конца:

Почему-то часто советуют не использовать innerHTML, хотя так совсем просто добавить.

Потому что при изменении innerHTML перезаписываетcя весь HTML код в контейнере, и слетают скрипты
Проведем эксперимент:

Создадим элемент с надписью 'click me', и добавим скрипт, который что-то делает (добавляет восклицательные знаки, например).
При вставке через appendChild или insertAdjacent или любым другим способом кроме innerHTML скрипт продолжает работать.
При вставке через innerHTML ломается. Потому вставка через innerHTML происходит так:
1. берется содержимое контейнера,
2. из него формируется строка с html-кодом
3. к ней добавляется то, что вы хотите вставить
4. все это вставляется в целевой элемент.
И на пункте №2 скрипты отваливаются.

При этом совершенно безопасно вставлять через innerHTML в пустой элемент, например.

Answer 3

[Rerurk]

Если у вас однотипный блок, создайте класс, и юзайте его со всеми необходимыми методами и полями