JavaScript метод insertAdjacentHTML и beforeend

Original author: David Walsh
  • Translation
Перевод статьи «JavaScript insertAdjacentHTML and beforeend», David Walsh.

Если вы не знали: чертов DOM очень медленный. А по мере того, как наши сайты становятся все более динамичными и AJAX-использующими, нам становиться все важнее управлять DOM древом с наименьшим ущербом в производительности. Недавно я написал статью о DocumentFragment'ах. Это разумный подход к объединению списка дочерних элементов под неким «псевдо-элементом», для дальнейшего помещения в реальный DOM элемент. Еще один замечательный метод для работы с элементами insertAdjacentHTML: это способ добавлять элементы в родительский элемент не задевая других его потомков.

JavaScript


Для примера вы получаете кусок HTML-кода в виде строки, полученной через AJAX-запрос, обычно в таком случае мы помещаем этот код в родительский элемент через свойство innerHTML:

function onSuccess(newHtml) {
	parentNode.innerHTML += newHtml;	
}

Проблема в данном коде заключается в том, что любые ссылки или события прикрепленные к дочерним элементам уничтожатся после изменения innerHTML родительского элемента, даже если вы просто добавляете разметку в конец родительского элемента — метод insertAdjacentHTML решает эту проблему:

function onSuccess(newHtml) {
	parentList.insertAdjacentHTML('beforeend', newHtml);
}

Данный код добавляет код в конец родительского элемента не задевая других его потомков. Это гениальный способ добавления в элемент разметки без создания промежуточного родительского элемента для добавляемого кода.

Вот так мы узнали о существовании проблемы и как её избежать при помощи описанного insertAdjacentHTML. Не забывайте этот метод, так как он не настолько известный, но тем не менее очень полезный.
Share post

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 18

    +13
    Спасибо, полезно. В статье не хватает информации о поддержке. Вот тут developer.mozilla.org/ru/docs/Web/API/Element.insertAdjacentHTML написано следующее:

    Chrome: 1.0
    Firefox (Gecko): 8.0 (8.0)
    Internet Explorer: 4.0
    Opera: 7.0
    Safari (WebKit): 4.0 (527)

    То есть, использовать можно всем.

    Ну и там же — прочие позиции: 'beforebegin', 'afterbegin', 'beforeend', 'afterend'.
    • UFO just landed and posted this here
        +2
        Да ладно вам. Internel Explorer 4.0? Opera 7.0? Да в те времена MS IE был самым прогрессивным браузером (примерно как сейчас Chrome) и развивался феноменально быстро!

        Это когда Windows XP вышла Microsoft почему-то решил, что web ему больше не интересен развитие MS IE было заморожено.
          0
          Там не то чтобы решили что веб больше не интересен, скорее что ie уже достаточно развит + таки постоянное давление антимонопольщиков, особенно после краха netscape.
    0
    Обычно — неуместное слово. Обычно пользуются insertAdjacentHTML, по причинам озвученным в статье (удаляются обработчики). Скоро хомяки загрызут хабр выдавая очевидные древние баяны за откровения.
      –1
      Пипол хавает) Я на этой сраной статейке оттяпал плюсов почти столько же, как за цикл из 4 статей по reactjs. Вот такой вот хабр справедливый:)))
        0
        Печальное зрелище. Погоня за плюсами приводит ресурс к деградации.
          –1
          Вы сначала напишите/переведите несколько статей, а потом говорите о деградации)
            0
            Если я перепишу сюда базовый учебник по javascript, это придаст моим словам вес, также как вашим? :)
              0
              Просто вы поймете, насколько это обидно угрохать 5 вечеров на перевод цикла статей и не получить почти никакого фидбека, а потом чисто случайно перевести коротенькую статью по джейквери и получить около 90 плюсов и кучу положительных комментариев. Я не говорю, что ваши слова не имеют веса, просто вы еще не вкусили «благодарности» хабра)
                0
                Это из разряда — Я ем гнилые яблоки, а мне за это аплодируют.

                Это конечно круто, но скиллы от этого не растут, зато растет ЧСВ :)

                Я в курсе, что ЧСВ затмевает разум и игрища в карму тому потворствуют. Если вы делаете это за карму, то наверное все делаете правильно. Лично я за 7 лет ничего на хабре не написал потому, что мне нечего предложить интересного, а иногда меня опережали и публиковали схожие темы раньше.

                Однако слава достигнутая ухищрениями недолговечна. Скоро пройдет и захочется стереть то, что сейчас приносит столько эйфории. Ну, да удачи вам в ваших играх ;)
                  0
                  Да при чем тут слава) Это же переводы, а не авторские статьи, я просто хочу привнести немного свежих знаний на хабру, а плюсы в карму и хороший рейтинг, это как отклик, как спасибо.

                  Это конечно круто, но скиллы от этого не растут, зато растет ЧСВ :)

                  Не правда, скиллы растут, я лично не перевожу материал, который и сам раньше знал, и перевожу исключительно то, что мне интересно. А в последнее время все больше короткие статьи перевожу, так как нет времени ввязываться в длинные переводы. Я тут как-бы просто привожу пример бессовестности хабры, а вы сразу на личности переходите.

                  Лично я за 7 лет ничего на хабре не написал потому, что мне нечего предложить интересного, а иногда меня опережали и публиковали схожие темы раньше.

                  Эм, ну знаете возьмитесь за переводы, это очень полезная вещь;)
                    0
                    >>ну знаете возьмитесь за переводы, это очень полезная вещь

                    А урезанная копипаста, вредная и бесполезная. learn.javascript.ru/multi-insert На русском и английском языке мало? Предлагаете на китайский переводить? Думаете так будет полезнее, вырывать куски из учебников и тыкать им в хомяков? И не нужно сразу огрызаться, что это вы сами перевели и т.д. Мне без разницы где вы взяли этот текст. Основной посыл статьи не озвучен.

                    Читать нужно мануалы, вдруг там добрые люди уже что-то изобрели давно, а вы и не знаете.

                    Можете заплюсовать этот комментарий или выделить жирным и отредактировать статью, а то хомяки читают только с положительной кармой я так понял. А потом можете удалить мой аккаунт нафиг. Грызться с каждым из-за непонимания элементарных вещей я не буду.
                      –1
                      Оу, остыньте, от вас исходит какая-то непонятная агрессия. Никто не запрещает вам читать мануалы, и вы видимо очень гордитесь тем, что их читаете. В любом случае такие короткие статьи описывающие какие-то отдельные полезные функции могут очень кому-то пригодиться и сэкономить время в будущем. Если вам так нравится читать мануалы, читайте себе на здоровье)
                        0
                        >>Оу, остыньте, от вас исходит какая-то непонятная агрессия
                        Что вам непонятно? Я поясню.

                        >>вы видимо очень гордитесь тем, что их читаете.
                        А вы гордитесь, что их не читаете?

                        >>В любом случае такие короткие статьи описывающие какие-то отдельные полезные функции могут очень кому-то пригодиться и сэкономить время в будущем
                        Они захламляют ресурс, в котором в последнее время и так невозможно ничего полезного найти среди тонны мусора.

                        >>Если вам так нравится читать мануалы, читайте себе на здоровье
                        Критика по делу вам не нравиться, на личности не нравиться. Вам что-то нравиться? Можете не отвечать, мне нечего было добавить к первому своему коментарию. Этот холивар всем читателям также бесполезен, как и эта статья, в которой всю полезную информацию написали в первом комментарии к ней. Давайте закончим взаимные колкости. Считайте что вы победили меня, задавив своим авторитетом.

      +2
      Ну, тогда пожалуй я напишу пару предложений, они короткие, но в них будет не меньше смысла, чем в этой статье.

      Нужно читать мануалы, производители браузеров пишут их для программистов, чтобы они не пилили свои велосипеды и пользовались удобными инструментами. В этом случае не нужно будет выдавать базовые знания, за что-то особенное. В подтверждение моим словам пусть выступают версии браузеров в которых внедрили insertAdjacentHTML
        0
        Статья — всем статьям статья.

        Only users with full accounts can post comments. Log in, please.