Здравствуйте, спасибо за интересный вариант реализации этой функции. Да, код стал более сжатым. Конечно для новичка в программировании он стал менее читабельным. Но все же выглядет отлично. Понравились решения с деструктуризацией и разбиением массива класса. Здорово сделано. Сохраню ваш вариант для демонстрации. С наступившим вас новым годом :)
Александр, отличный урок, как раз дает понимание как сделать себе оптимизацию своего кода, и понять как работает все под капотом. Лучше потратить время и понять как работает все в нативном языке, потом любой инструмент написанный на JS. - можно понять на easy. Спасибо вам.
Спасибо за урок. Момент с использованием рекурсивной функции было сложно понять. Но, думаю, если часто пытаться этот способ использовать на практике, понимание придёт.
Круто! ключ parent я однозначно буду использовать, так как прописывать append каждый раз утомляет)) Не совсем понял зачем делать массив из объекта в четвертой строчке, что так ключ и значение в массиве будет, что ключ и его значение key.value будет в объекте. А вот по поводу минусов... мне кажется это то, что теперь мы создаем в одной переменной и элемент и его дочерний элемент и что бы обратиться к какому-то одному элементу нужно будет... даже не знаю пока что как к нему нужно правильно обращаться))) Но повесить обработчик на кнопку или инпут в форме будет уже не так просто. Спасибо за контент!
Рад, что в этом виде было что то новое и полезное. Если в вопросе имеется ввиду параметр elements с массивом в значении, то скажу точно. Он сможет помочь вам вызовом всего одной функции создать сложную структуру DOM элементов :)
Надо бы ещё запилить видео про прописы (точнее асинхронность в целом) и прототипы. Я в свое время долго не мог понять смысл прототипов и, когда разобрался, написал для себя статью с интересными ассоциациями. Думаю, можно на моём материале сделать видео.
В начале видео свойства value и tabindex записываются как свойства объекта, а не как атрибуты, поэтому их и не видно, если вывести в консоль elem.value то должно показывать поидее
Спасибо за урок! Он очень полезный! При использовании этой функции в модулях как лучше ее изменить, чтобы можно было и вложить элементы в другие элементы, а допустим весь блок можно было добавлять уже в другом файле в документ?
Рад, что видео было для вас полезным. Здесь я бы рекомендовал эту функцию поместить в отельный модуль. Так вы сможете подключать этот модуль в любом документе (на любой странице) И в итоге создавать элементы на нужной странице. :)
Всё это конечно хорошо, но есть такая известная, но незаслуженно забыта библиотека как jQuery, которая как раз и призвана сократить написание кода. А её преимущества, наверное, ярче всего видны при выборке элементов и при навешивании на них обработчиков событий.
jQuery - библиотека, которая служила нам верно и трудолюбиво. Мы провожаем ее с почестями и будем ее помнить. Она славна тем, что с ее помощью удобно получать нужные DOM элементы и многое другое. Но сейчас нативный JS многому научился и он практически одинаков во всех браузерах. Раньше проблему с кроссбраузерности решал jQuery. Нативный JS уже очень много умеет :)
Здравствуйте, хороший вопрос. Этот динамическое создание элементов уже во время работы страницы. Сейчас многие сайты переходят на такой принцип работы. Элементы создаются и удаляются во время сайты и сайт перестраивается при каких то действиях пользователей. Вы нажимаете кнопку и у вас что то меняется или появляется и при этом страница не перегружается )
Спасибо за полезную информацию 👍👍👍
Спасибо за ваш отзыв и поддержку :)
Интересная функция спасибо за видео урок!Лайк
Рад помочь. Функцию можно доработать, например добавить добавление событий через нее :)
Спасибо, спустя пол года вспомнил про это замечательное видео с рекурсивным добавлением элементов)
Небольшой рефакторинг на мой вкус))
```
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",
},
},
],
});
```
Здравствуйте, спасибо за интересный вариант реализации этой функции. Да, код стал более сжатым. Конечно для новичка в программировании он стал менее читабельным. Но все же выглядет отлично. Понравились решения с деструктуризацией и разбиением массива класса. Здорово сделано. Сохраню ваш вариант для демонстрации. С наступившим вас новым годом :)
лучше видео на тему создание DOM, спасибо
Спасибо вас :) Рад, что видео было полезным :)
Александр, отличный урок, как раз дает понимание как сделать себе оптимизацию своего кода, и понять как работает все под капотом. Лучше потратить время и понять как работает все в нативном языке, потом любой инструмент написанный на JS. - можно понять на easy. Спасибо вам.
Спасибо за комментарий. Да, конечно. Понимание работы внутри - ключ к быстрому написанию красивого когда )
Спасибо за урок. Момент с использованием рекурсивной функции было сложно понять. Но, думаю, если часто пытаться этот способ использовать на практике, понимание придёт.
Да, тема рекурсии заслуживает отдельного видео. Ставлю на заметку. Спасибо :)
Круто! ключ parent я однозначно буду использовать, так как прописывать append каждый раз утомляет)) Не совсем понял зачем делать массив из объекта в четвертой строчке, что так ключ и значение в массиве будет, что ключ и его значение key.value будет в объекте. А вот по поводу минусов... мне кажется это то, что теперь мы создаем в одной переменной и элемент и его дочерний элемент и что бы обратиться к какому-то одному элементу нужно будет... даже не знаю пока что как к нему нужно правильно обращаться))) Но повесить обработчик на кнопку или инпут в форме будет уже не так просто. Спасибо за контент!
Рад, что в этом виде было что то новое и полезное. Если в вопросе имеется ввиду параметр elements с массивом в значении, то скажу точно. Он сможет помочь вам вызовом всего одной функции создать сложную структуру DOM элементов :)
Надо бы ещё запилить видео про прописы (точнее асинхронность в целом) и прототипы. Я в свое время долго не мог понять смысл прототипов и, когда разобрался, написал для себя статью с интересными ассоциациями. Думаю, можно на моём материале сделать видео.
Всегда думаю об этом, но пока не решил, как материал подать. Что бы было понятно. Тема для объяснения сложная :) Но хочу это сделать. Спасибо.
Только не совсем понял связь промисов и прототипов. Тут я бы разделил темы. Прототипы - классы, а промисы - асинхронность
В начале видео свойства value и tabindex записываются как свойства объекта, а не как атрибуты, поэтому их и не видно, если вывести в консоль elem.value то должно показывать поидее
Да да, не все объекты имеют реактивную связь с определенными атрибутами :)
Спасибо за урок! Он очень полезный! При использовании этой функции в модулях как лучше ее изменить, чтобы можно было и вложить элементы в другие элементы, а допустим весь блок можно было добавлять уже в другом файле в документ?
Рад, что видео было для вас полезным. Здесь я бы рекомендовал эту функцию поместить в отельный модуль. Так вы сможете подключать этот модуль в любом документе (на любой странице) И в итоге создавать элементы на нужной странице. :)
Всё это конечно хорошо, но есть такая известная, но незаслуженно забыта библиотека как jQuery, которая как раз и призвана сократить написание кода. А её преимущества, наверное, ярче всего видны при выборке элементов и при навешивании на них обработчиков событий.
jQuery - библиотека, которая служила нам верно и трудолюбиво. Мы провожаем ее с почестями и будем ее помнить. Она славна тем, что с ее помощью удобно получать нужные DOM элементы и многое другое. Но сейчас нативный JS многому научился и он практически одинаков во всех браузерах. Раньше проблему с кроссбраузерности решал jQuery. Нативный JS уже очень много умеет :)
а если в двух словах, зачем создавать DOM-элементы с помощью js, если есть HTML-файл, в котором можно ту же форму сверстать быстрее?
Здравствуйте, хороший вопрос. Этот динамическое создание элементов уже во время работы страницы. Сейчас многие сайты переходят на такой принцип работы. Элементы создаются и удаляются во время сайты и сайт перестраивается при каких то действиях пользователей. Вы нажимаете кнопку и у вас что то меняется или появляется и при этом страница не перегружается )
@@alex_dudukalo интересно. спасибо!