А есть пример, что создать надо? Вы имеете ввиду такое?
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>
