Создание DOM элементов

Быстрое создание DOM элементов для тех, кто ценит свое время.

[Sasha]

Интересная функция спасибо за видео урок!Лайк

[МихаилЯнов-ыд]

Александр, отличный урок, как раз дает понимание как сделать себе оптимизацию своего кода, и понять как работает все под капотом. Лучше потратить время и понять как работает все в нативном языке, потом любой инструмент написанный на JS. - можно понять на easy. Спасибо вам.

[Vladimir-yhdl]

лучше видео на тему создание DOM, спасибо

[РоманСтоляров-йк]

Спасибо за урок. Момент с использованием рекурсивной функции было сложно понять. Но, думаю, если часто пытаться этот способ использовать на практике, понимание придёт.

[carry-on-chaos]

Спасибо, спустя пол года вспомнил про это замечательное видео с рекурсивным добавлением элементов)
Небольшой рефакторинг на мой вкус))
```
const createElement = ({
tag = "div",
classList = [],
params = {},
parent = null,
children = [],
}) => {
const elem = document.createElement(tag);
elem.className = classList.join(" ");
Object.assign(elem, params);
if (parent !== null) parent.append(elem);
for (child of children) {
const { tag, classList, params } = child;
createElement({
tag,
classList,
params,
parent: elem,
});
}
return elem;
};

const div = createElement({
tag: "div",
classList: ["wrapper"],
parent: document.body,
children: [
{
tag: "h1",
classList: ["grey", "big"],
params: {
textContent: "hello world",
},
},
{
tag: "button",
classList: ["grey", "button"],
params: {
textContent: "Push",
},
},
],
});
```

[СергейГадаев-ун]

Круто! ключ parent я однозначно буду использовать, так как прописывать append каждый раз утомляет)) Не совсем понял зачем делать массив из объекта в четвертой строчке, что так ключ и значение в массиве будет, что ключ и его значение key.value будет в объекте. А вот по поводу минусов... мне кажется это то, что теперь мы создаем в одной переменной и элемент и его дочерний элемент и что бы обратиться к какому-то одному элементу нужно будет... даже не знаю пока что как к нему нужно правильно обращаться))) Но повесить обработчик на кнопку или инпут в форме будет уже не так просто. Спасибо за контент!

[megabulk]

Надо бы ещё запилить видео про прописы (точнее асинхронность в целом) и прототипы. Я в свое время долго не мог понять смысл прототипов и, когда разобрался, написал для себя статью с интересными ассоциациями. Думаю, можно на моём материале сделать видео.

[carry-on-chaos]

В начале видео свойства value и tabindex записываются как свойства объекта, а не как атрибуты, поэтому их и не видно, если вывести в консоль elem.value то должно показывать поидее

[ОюнаЖ]

Спасибо за урок! Он очень полезный! При использовании этой функции в модулях как лучше ее изменить, чтобы можно было и вложить элементы в другие элементы, а допустим весь блок можно было добавлять уже в другом файле в документ?

[sergeykhmelnitsky]

а если в двух словах, зачем создавать DOM-элементы с помощью js, если есть HTML-файл, в котором можно ту же форму сверстать быстрее?

[megabulk]

Всё это конечно хорошо, но есть такая известная, но незаслуженно забыта библиотека как jQuery, которая как раз и призвана сократить написание кода. А её преимущества, наверное, ярче всего видны при выборке элементов и при навешивании на них обработчиков событий.