JavaScript #6: создание и добавление элементов DOM createElement, append, remove, insertAdjacentHTML

แชร์
ฝัง
  • เผยแพร่เมื่อ 25 ม.ค. 2020
  • Инфо-сайт: proproprogs.ru
    Создание элементов DOM-дерева: createElement, createTextNode. Добавление элементов в HTML-документ: append, prepend, before, after, replaceWith, cloneNode. Вставка фрагмента HTML в документ - insertAdjacentHTML. Специализированные методы вставки: insertAdjacentText, insertAdjacentElement. Работа с DocumentFragment. Метод document.write.

ความคิดเห็น • 40

  • @valeriigerasymovych3732
    @valeriigerasymovych3732 3 ปีที่แล้ว +8

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

  • @kramersaw
    @kramersaw 2 ปีที่แล้ว +1

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

  • @web2905
    @web2905 2 ปีที่แล้ว +3

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

  • @user-qi8ws2se1z
    @user-qi8ws2se1z 4 ปีที่แล้ว +2

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

  • @maxet2374
    @maxet2374 4 ปีที่แล้ว +4

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

  • @user-ce2vy8lh1j
    @user-ce2vy8lh1j ปีที่แล้ว +1

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

  • @magistrbrims
    @magistrbrims ปีที่แล้ว +1

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

  • @lolashepota4050
    @lolashepota4050 3 ปีที่แล้ว +1

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

  • @valeriymalishevskyi1723
    @valeriymalishevskyi1723 4 ปีที่แล้ว +2

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

  • @orthodox-chanel
    @orthodox-chanel 6 หลายเดือนก่อน +2

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

  • @syrymzhakypbekov1949
    @syrymzhakypbekov1949 4 ปีที่แล้ว +2

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

    • @morphpurple6842
      @morphpurple6842 3 ปีที่แล้ว +1

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

    • @timashoff
      @timashoff 2 ปีที่แล้ว

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

    • @catsapp
      @catsapp ปีที่แล้ว +1

      @@morphpurple6842 Илья Кантор наверное придумал это язык. Как Тема Лебедев придумал дизайн. Такие персонажи всегда обвалакивают себя легендами.

  • @_Fantom_.
    @_Fantom_. 3 ปีที่แล้ว +1

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

  • @alexforos5425
    @alexforos5425 2 ปีที่แล้ว +1

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

  • @sikinski1588
    @sikinski1588 3 ปีที่แล้ว +1

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

  • @catsapp
    @catsapp ปีที่แล้ว +1

    Видосик четкий!

  • @user-si8zc3zk8d
    @user-si8zc3zk8d 3 ปีที่แล้ว

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

  • @user-nw2eb6lx1k
    @user-nw2eb6lx1k 2 ปีที่แล้ว +1

    Спасибо!

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

  • @yahyo5452
    @yahyo5452 2 ปีที่แล้ว +1

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

  • @yahyo5452
    @yahyo5452 2 ปีที่แล้ว +1

    СПС

  • @gregdmitriev2784
    @gregdmitriev2784 2 ปีที่แล้ว +1

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

    • @selfedu_rus
      @selfedu_rus  2 ปีที่แล้ว

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

    • @gregdmitriev2784
      @gregdmitriev2784 2 ปีที่แล้ว +1

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

    • @catsapp
      @catsapp ปีที่แล้ว

      питон или пайтон?

  • @evgenihmaloi26
    @evgenihmaloi26 3 ปีที่แล้ว +2

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

    • @selfedu_rus
      @selfedu_rus  3 ปีที่แล้ว +1

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

  • @donfedor007
    @donfedor007 ปีที่แล้ว

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

  • @sergeylysenko1808
    @sergeylysenko1808 4 ปีที่แล้ว +1

    respect

  • @moto_venom
    @moto_venom 3 ปีที่แล้ว

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

    • @catsapp
      @catsapp ปีที่แล้ว

      А что это

  • @UnrealTabby
    @UnrealTabby 3 ปีที่แล้ว

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

    • @selfedu_rus
      @selfedu_rus  3 ปีที่แล้ว +2

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

    • @UnrealTabby
      @UnrealTabby 3 ปีที่แล้ว +1

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

  • @farmfarm1589
    @farmfarm1589 2 ปีที่แล้ว

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

    • @catsapp
      @catsapp ปีที่แล้ว

      Хопа