Как создать html тег с классом и содержимым через JS?

Question

[LinuxGod]

Требуется создать сложный html тэг с содержимым, классами и значениями, но вот как это сделать ?
То есть при вызове функции у меня создавался тэг уже с подгруженными классами и содержимым.

Comments

[Froggyweb]

Что? здесь должно быть виде с индюками....

Answer 1

[Александр]

А есть пример, что создать надо? Вы имеете ввиду такое?

const render = (tag, properties = null, children = null) => {
    const element = document.createElement(tag);

    if (properties !== null) {
        for (let [key, value] of Object.entries(properties)) {
            if (key in element) {
                element[key] = value;
            } else {
                element.setAttribute(key, value);
            }
        }
    }

    if (children !== null) {
        if (children instanceof Array) {
            element.append(...children);
        } else {
            element.append(children);
        }
    }

    return element;
};

const element = render('div', { className: 'article' }, [
	render('header', { className: 'article__header' }, render('h1', {
		className: 'article__title',
		textContent: 'Article'
	})),
	render('main', { className: 'article__body' }, Array(12).fill(null).map(() => render('p', {
		className: 'article__text',
		textContent: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur, voluptate tempora illum, sed exercitationem! Minima quasi, doloremque quos hic blanditiis commodi non dolorum. Assumenda ex aperiam voluptatibus laborum dolor.'
	})))
]);

Сделает такой элемент

<div class="article">
    <header class="article__header">
        <h1 class="article__title">Article</h1>
    </header>
    <main class="article__body">
        <p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur, voluptate tempora illum, sed exercitationem! Minima quasi, doloremque quos hic blanditiis commodi non dolorum. Assumenda ex aperiam voluptatibus laborum dolor.</p>
        <p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur, voluptate tempora illum, sed exercitationem! Minima quasi, doloremque quos hic blanditiis commodi non dolorum. Assumenda ex aperiam voluptatibus laborum dolor.</p>
        <p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur, voluptate tempora illum, sed exercitationem! Minima quasi, doloremque quos hic blanditiis commodi non dolorum. Assumenda ex aperiam voluptatibus laborum dolor.</p>
        <p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur, voluptate tempora illum, sed exercitationem! Minima quasi, doloremque quos hic blanditiis commodi non dolorum. Assumenda ex aperiam voluptatibus laborum dolor.</p>
        <p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur, voluptate tempora illum, sed exercitationem! Minima quasi, doloremque quos hic blanditiis commodi non dolorum. Assumenda ex aperiam voluptatibus laborum dolor.</p>
        <p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur, voluptate tempora illum, sed exercitationem! Minima quasi, doloremque quos hic blanditiis commodi non dolorum. Assumenda ex aperiam voluptatibus laborum dolor.</p>
        <p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur, voluptate tempora illum, sed exercitationem! Minima quasi, doloremque quos hic blanditiis commodi non dolorum. Assumenda ex aperiam voluptatibus laborum dolor.</p>
        <p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur, voluptate tempora illum, sed exercitationem! Minima quasi, doloremque quos hic blanditiis commodi non dolorum. Assumenda ex aperiam voluptatibus laborum dolor.</p>
        <p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur, voluptate tempora illum, sed exercitationem! Minima quasi, doloremque quos hic blanditiis commodi non dolorum. Assumenda ex aperiam voluptatibus laborum dolor.</p>
        <p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur, voluptate tempora illum, sed exercitationem! Minima quasi, doloremque quos hic blanditiis commodi non dolorum. Assumenda ex aperiam voluptatibus laborum dolor.</p>
        <p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur, voluptate tempora illum, sed exercitationem! Minima quasi, doloremque quos hic blanditiis commodi non dolorum. Assumenda ex aperiam voluptatibus laborum dolor.</p>
        <p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit tenetur, voluptate tempora illum, sed exercitationem! Minima quasi, doloremque quos hic blanditiis commodi non dolorum. Assumenda ex aperiam voluptatibus laborum dolor.</p>
    </main>
</div>

Comments

[LinuxGod]

Мне нужно чтобы при нажатии на кнопку в ul добавилось li но li внутри которого div внутри которого... и тд

[Александр]

LinuxGod, Ну, пример как такое можно сделать я показал, а потом просто в ul также .append(element) делаете.

Answer 2

[xmoonlight]

Если хотите быстрый и простой вариант динамической компоновки разных блоков в стиле "lego" - смотрите includeHTML.