JavaScript #6: создание и добавление элементов DOM createElement, append, remove, insertAdjacentHTML
HTML-код
- Опубликовано: 5 дек 2024
- Инфо-сайт: proproprogs.ru
Создание элементов DOM-дерева: createElement, createTextNode. Добавление элементов в HTML-документ: append, prepend, before, after, replaceWith, cloneNode. Вставка фрагмента HTML в документ - insertAdjacentHTML. Специализированные методы вставки: insertAdjacentText, insertAdjacentElement. Работа с DocumentFragment. Метод document.write.
Отличный материал! После непонятной 3хчасовой лекции в обучающем центре, с помощью этого видео разобрался во всем за 20 минут.
Вообще супер подача! Без лишней болтовни и речь поставлена!
Я вообще только сейчас понял какие элементы устаревшие, а какие нет. Я использовал половину новых и половину старых :) Спасибо.
Очень качественный контент, за такое нужно платить!
Да, я думаю он должен платить Илье Кантору за то, что использует его материал. Источник то он даже не указывает.
@@morphpurple6842 да это же плюс, что используется Канторовская основа! Прочел глазами, закрепил через аудио, прекрасно )
Оч хороший глубокий урок. Спасибо
огромное спасибо за примеры. Все чётенько и понятненько.
Великолепный урок. Большое спасибо!
Классный урок, много практических вещей!
Спасибо. Отличньіе уроки. все понятно.!!!!
Спасибо за понятное объяснение.
It is really understandable content for beginners! Many thanks for the Great Job you done!
Отличный урок, спасибо!
Хоть метод document.wire() и устаревший но мне кажется его вполне можно применять в качестве средства защиты от парсинга)))
Спасибо за уроки:3
Спасибо!
Огромное спасибо!
Красавчик
12:30 стоит отметить, что append вызывает каждый раз перерисовку страницы браузером, а это трудоемкий процесс, и, все таки, лучше добавить несколько элементов за один раз
не, был не прав. браузер оптимизирует вставку элементов. В случае цикла, append не каждый раз вызывает перерисовку, браузер добавляет на страницу все элементы за один раз.
добавим к примеру кнопку, по нажатию которой запускается цикл.
const btn = document.querySelector('button')
btn.onclick = () => {
const ul = document.querySelector('ul')
const list = ['a', 'б', 'в', 'г']
for (let l of list) {
let item = document.createElement('li')
item.textContent = l
ul.append(item)
alert(l)
console.log(l)
console.log(item)
}
}
сначала срабатывает окно алерта и в консоль выводятся буквы, оставляя при этом место под элементы, и когда цикл отрабатывает все элементы сразу же отображаются в консоли на своих местах.
Ошибка в after и before, напутал. В скрине одно, в коде другое. А объяснении третье!
Начиная с 6:30
да, есть немного, но из примера дальше все должно быть ясно
Спосибо, Я подписал на 2 канал
Добрый день! Почему методы устаревают?
отличное объяснение, спасибо 🤝 (p.s. только пож-та - не "ява-скрипт" !!! 😄, java читается и произносится в англ.яз как "джава") 😉
спасибо, но можно и так и так )
@@selfedu_rus )) ну нельзя же😄режет слух! но всё равно спасибо за контент🦾🤗
СПС
Мне больше вот что интересно, как защитить это от XSS атаки
Почему вы не упомянули крайне функциональный метод html() ?
Это метод библиотеки jQuery или вы имеете в виду innerHTML? О последнем рассказывается на одном из занятий.
@@selfedu_rus Да, действительно, это метод jQuery. Запамятовал, прошу прощения !
respect
А вот это а вот тут а вот так