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.

Комментарии • 35

  • @valeriigerasymovych3732
    @valeriigerasymovych3732 4 года назад +9

    Отличный материал! После непонятной 3хчасовой лекции в обучающем центре, с помощью этого видео разобрался во всем за 20 минут.

  • @kramersaw
    @kramersaw 2 года назад +1

    Вообще супер подача! Без лишней болтовни и речь поставлена!

  • @web2905
    @web2905 3 года назад +2

    Я вообще только сейчас понял какие элементы устаревшие, а какие нет. Я использовал половину новых и половину старых :) Спасибо.

  • @syrymzhakypbekov1949
    @syrymzhakypbekov1949 4 года назад +2

    Очень качественный контент, за такое нужно платить!

    • @morphpurple6842
      @morphpurple6842 4 года назад +1

      Да, я думаю он должен платить Илье Кантору за то, что использует его материал. Источник то он даже не указывает.

    • @timashoff
      @timashoff 2 года назад

      @@morphpurple6842 да это же плюс, что используется Канторовская основа! Прочел глазами, закрепил через аудио, прекрасно )

  • @maxet2374
    @maxet2374 4 года назад +4

    Оч хороший глубокий урок. Спасибо

  • @Alex_Korotkin
    @Alex_Korotkin 4 года назад +2

    огромное спасибо за примеры. Все чётенько и понятненько.

  • @magistrbrims
    @magistrbrims 2 года назад +1

    Великолепный урок. Большое спасибо!

  • @БогданФещенко-я6й
    @БогданФещенко-я6й 2 года назад +1

    Классный урок, много практических вещей!

  • @valeriymalishevskyi1723
    @valeriymalishevskyi1723 4 года назад +2

    Спасибо. Отличньіе уроки. все понятно.!!!!

  • @alexforos5425
    @alexforos5425 3 года назад +1

    Спасибо за понятное объяснение.

  • @lolashepota4050
    @lolashepota4050 4 года назад +1

    It is really understandable content for beginners! Many thanks for the Great Job you done!

  • @_Fantom_.
    @_Fantom_. 4 года назад +1

    Отличный урок, спасибо!

  • @orthodox-chanel
    @orthodox-chanel Год назад +2

    Хоть метод document.wire() и устаревший но мне кажется его вполне можно применять в качестве средства защиты от парсинга)))

  • @sikinski1588
    @sikinski1588 3 года назад +1

    Спасибо за уроки:3

  • @НатальяАлфёрова-и6т
    @НатальяАлфёрова-и6т 2 года назад +1

    Спасибо!

  • @МихаилЗайченко-о5ц
    @МихаилЗайченко-о5ц 4 года назад

    Огромное спасибо!

  • @РусланЛи-б3х
    @РусланЛи-б3х 3 года назад +1

    Красавчик

  • @timashoff
    @timashoff 2 года назад +1

    12:30 стоит отметить, что append вызывает каждый раз перерисовку страницы браузером, а это трудоемкий процесс, и, все таки, лучше добавить несколько элементов за один раз

    • @timashoff
      @timashoff 2 года назад

      не, был не прав. браузер оптимизирует вставку элементов. В случае цикла, 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)
      }
      }
      сначала срабатывает окно алерта и в консоль выводятся буквы, оставляя при этом место под элементы, и когда цикл отрабатывает все элементы сразу же отображаются в консоли на своих местах.

  • @evgenihmaloi26
    @evgenihmaloi26 4 года назад +2

    Ошибка в after и before, напутал. В скрине одно, в коде другое. А объяснении третье!
    Начиная с 6:30

    • @selfedu_rus
      @selfedu_rus  4 года назад +1

      да, есть немного, но из примера дальше все должно быть ясно

  • @yahyo5452
    @yahyo5452 2 года назад +1

    Спосибо, Я подписал на 2 канал

  • @donfedor007
    @donfedor007 2 года назад

    Добрый день! Почему методы устаревают?

  • @bjol_Dg
    @bjol_Dg 3 года назад +1

    отличное объяснение, спасибо 🤝 (p.s. только пож-та - не "ява-скрипт" !!! 😄, java читается и произносится в англ.яз как "джава") 😉

    • @selfedu_rus
      @selfedu_rus  3 года назад

      спасибо, но можно и так и так )

    • @bjol_Dg
      @bjol_Dg 3 года назад +1

      @@selfedu_rus )) ну нельзя же😄режет слух! но всё равно спасибо за контент🦾🤗

  • @yahyo5452
    @yahyo5452 2 года назад +1

    СПС

  • @moto_venom
    @moto_venom 4 года назад

    Мне больше вот что интересно, как защитить это от XSS атаки

  • @UnrealTabby
    @UnrealTabby 4 года назад

    Почему вы не упомянули крайне функциональный метод html() ?

    • @selfedu_rus
      @selfedu_rus  4 года назад +2

      Это метод библиотеки jQuery или вы имеете в виду innerHTML? О последнем рассказывается на одном из занятий.

    • @UnrealTabby
      @UnrealTabby 4 года назад

      @@selfedu_rus Да, действительно, это метод jQuery. Запамятовал, прошу прощения !

  • @sergeylysenko1808
    @sergeylysenko1808 4 года назад +1

    respect

  • @farmfarm1589
    @farmfarm1589 3 года назад

    А вот это а вот тут а вот так