@LinuxGod

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

Требуется создать сложный html тэг с содержимым, классами и значениями, но вот как это сделать ?
То есть при вызове функции у меня создавался тэг уже с подгруженными классами и содержимым.
  • Вопрос задан
  • 208 просмотров
Решения вопроса 1
Seasle
@Seasle Куратор тега JavaScript
Помог - отметь решением \( ゚ヮ゚)/
А есть пример, что создать надо? Вы имеете ввиду такое?
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>
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
Если хотите быстрый и простой вариант динамической компоновки разных блоков в стиле "lego" - смотрите includeHTML.
Ответ написан
Ваш ответ на вопрос

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

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