// tagName - Имя тега
// props - объект с свойствами DOM элемента
// children - массив с DOM элементами
function createElement (tagName, props = {}, children = []) {
const newDOMElement = document.createElement(tagName);
if (props) {
for (const prop in props) {
if (Object.prototype.hasOwnProperty.call(props, prop)) {
newDOMElement[prop] = props[prop];
}
}
}
if (children.length) {
children.forEach(child => {
newDOMElement.append(child);
});
}
return newDOMElement;
}
const body = document.body;
// Создаём новый DOM узел
const newDOM = createElement('div', null, [
createElement('h1', null, [
'Заголовок страницы'
]),
createElement('p', null, [
'Привет, Мир!'
]),
createElement('button', {
onclick: () => {
alert('бабах');
}
}, [
'Кликни меня'
])
]);
// Вставляем в body новый DOM узел
body.append(newDOM);
Код по сути написал для примера, много особенностей работы с DOM не учтено, но принцип я показал