@AlexandrMa

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

При создании каждого отдельного элемента и добавления его в главный элемент уходит очень много времени.
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, хотя так совсем просто добавить.
  • Вопрос задан
  • 95 просмотров
Пригласить эксперта
Ответы на вопрос 4
EgoSab
@EgoSab
Web-developer
let comment = `
<div class="comment">
    <div class="comment-avatar"></div>
    <div class="comment-description"></div>
</div>
`;

document.body.append(comment);


Можно так добавлять, но этот способ не безопасный
Ответ написан
edward_freedom
@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);
    });
Ответ написан
Aleksandr-JS-Developer
@Aleksandr-JS-Developer
Бери и делай
let div = document.createElement('div');
div.id = 'dialog';

const someTitle = 'Заголовок';

div.innerHTML = `
    <h2 class="title">${someTitle}</h2>
    <p></p>
    <p></p>
    <p></p>
    <h2 class="title">${someTitle}2</h2>
`;

// тут можно находить элементы в div
// например:
div.querySelector( '.title' ).addEventListener( 'click', console.log )

document.body.appendChild( div ); // с сохранением всех слушателей и так далее.


Как писали выше, не забудьте, что код, который будет вставлен в вашу разметку будет интерпретироваться браузером.
Например, если в переменную someTitle из примера вставить вот это: const someTitle = '<script>alert(123);</script>', то алерт сработает. Это явно не то, что вы хотите.
Ответ написан
@Rerurk
Если у вас однотипный блок, создайте класс, и юзайте его со всеми необходимыми методами и полями
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы