Главная » Вопросы и ответы

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

На чтение 10 мин Просмотров 143 Опубликовано
Содержание
  1. insertAdjacentHTML
  2. Замена и клонирование узлов
  3. replaceChild
  4. replaceWith
  5. cloneNode – клонирование узла
  6. Удаление узлов
  7. removeChild
  8. remove
  9. Создание элемента со строками обратной ссылок JavaScript
  10. My name is Roviel and i love playing and eating
  11. cloneNode
  12. Вставка элементов и текстовых узлов
  13. appendChild
  14. insertBefore
  15. Современные методы вставки и замены
  16. InsertAdjacent
  17. Веб-технологии
  18. HTML
  19. CSS
  20. JavaScript
  21. DocumentFragment

insertAdjacentHTML

Описанные выше методы ввода добавляют отдельные теги или текстовую информацию. Кроме того, текст вводится точно как текст, то есть теги в тексте будут отображаться как текст. Например:

document.body.append («Текст с тегами»);

Но что, если бы мы хотели вставить строку как строку HTML со всеми обработанными тегами, а не как простой текст? Именно для этого используется метод insertAdjacentHTML, имеющий следующий синтаксис:

elem.insertAdjacentHTML (где, html)

где где он может принимать значения:

  • «beforebegin» — вставить html непосредственно перед элементом;
  • «afterbegin» — вставить html как первый дочерний элемент в elem;
  • «beforeend» — вставить html в качестве последнего дочернего элемента в элементе;
  • «afterend» — вставить html сразу после элемента.

Возьмем для примера следующий список:

  • Меркурий
  • Венера
  • Земля

И делаем следующие вставки:

пусть список = document.querySelector («ul.list»); list.insertAdjacentHTML («beforebegin», «Список планет

«); list.insertAdjacentHTML (» после»,»

Конец списка «); list.insertAdjacentHTML (» afterbegin»,»

  • Солнце «); list.insertAdjacentHTML (» до конца»,»

Марс»);

Есть еще два похожих, но более специализированных метода:

  • insertAdjacentText (где, текст) — для вставки текстовой строки текста;
  • insertAdjacentElement (где, elem) — для вставки элемента elem.

Например:

list.insertAdjacentText («beforebegin», «Список планет

«);

вставит текст в виде строки и

пусть li = document.createElement («li»); li.innerHTML = «Солнце»; list.insertAdjacentElement («после начала», li);

добавит соответствующий элемент.

Однако на практике эти два метода практически не применяются. Вместо этого удобнее использовать методы append / prepend / before / after просто потому, что их легче писать. Если нам нужно удалить узел из дерева DOM, для этого часто используется метод

node.remove()

Например, есть список:

  • Солнце
  • Меркурий
  • Венера
  • Земля
  • Марс

И мы хотим удалить из него последние элементы, пока мы полностью его не сотрем. Сделать это можно так:

let idRemove = setInterval (function () {let li = document.querySelector («ul.list> li: last-child»); if (li === null) {clearInterval (idRemove); alert («Список очищен») ;} else li.remove ();}, 500);

Замена и клонирование узлов

Замена одних узлов другими в JavaScript может быть выполнена с помощью методов replaceChild (когда требуется поддержка «старых» браузеров) и replaceWith.

replaceChild

replaceChild предназначен для замены дочернего элемента parentNode другим:

parentNode.replaceChild (newChild, oldChild);

Где:

  • newChild — элемент для замены oldChild;
  • parentNode — родительский узел отношения oldChild.

В результате этот метод возвращает узел, который был заменен новым узлом, например oldChild.

Например, заменить в

    • в соответствии с
  • на новый с текстом «Пятерка».
    • Один
    • Два
    • Три

replaceWith

node.replaceWith позволяет заменить узел определенными узлами или строками:

node.replaceWith (.. узлов, строк) Например, замените в

    в соответствии с
  • другие элементы:
    • Один
    • Два
    • Три

cloneNode – клонирование узла

cloneNode используется для создания копии узла:

let copy = node.cloneNode (глубокий);

Где:

  • узел — узел, который нужно клонировать;
  • copy — переменная, в которую нужно поместить новый узел, который будет копией узла;
  • deep — глубина клонирования (по умолчанию false, т.е клонируется только сам узел без дочерних); если установлено значение true, узел будет скопирован со всеми его дочерними элементами.

Например, скопируйте

    и введите его в конце .
    • О
    • ди
    н

Удаление узлов

Вы можете удалить узел из DOM в JavaScript, используя методы removeChild (не рекомендуется) и remove.

removeChild

Синтаксис RemoveChild:

parent.removeChild (узел)

Чтобы удалить узел, необходимо вызвать метод removeChild для родительского элемента и передать его (узел) в качестве аргумента).

Например, удалим второй

v

  1. Смартфон
  2. Планшет
  3. Ноутбук

В результате метод removeChild возвращает удаленный узел.

Например, давайте удалим элемент, а затем вставим его в другое место:

remove

Другой способ удалить узел — использовать метод удаления.

Удалить синтаксис:

node.remove()

Например, давайте удалим элемент, щелкнув по нему:

Когда мы вставляем элементы, они удаляются со своих старых мест.

Создание элемента со строками обратной ссылок JavaScript

Строки обратной ссылки JavaScript также известны как литералы шаблонов.

Согласно MDN, шаблонные литералы — это строковые литералы, допускающие встроенные выражения. С ними можно использовать многострочные строки и функции интерполяции строк.

Мы будем динамически создавать буквальные элементы шаблона JavaScript, вставлять их в DOM и присоединять обработчики событий.

Посмотрите эту живую демонстрацию на codepen.

Здесь мы снова создадим профиль собаки, который мы создали ранее, с разницей в файле JavaScript. Так что наши HTML и CSS остаются прежними.

Использование модельных литералов let newDog = `

собака

My name is Roviel and i love playing and eating

Lorem ipsum dolor sit amet, conctetuer adipiscing elit. Eneanmodo ligula eget dolor. Месса Энея. Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Ничего подобного. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Целый Tincidunt. Cras dapibus. Vivamus elementum всегда nisi. Enean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consquat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus не будет жить ничем, кроме metus varius laoreet. Quisque rutrum. Enean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Имя Эгет Дуй. Этиам ронкус. Mecenate tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Mecenate nec odio et ante tincidunt tempus. Donec vitae sapien ut free venenatis faucibus. Nullam quis ante. Etiam sit amet jars eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris сидят амет нибх. Donec sodales sagittis magna. Sed conquat, leo eget bibendum sodales, augue velit cursus nunc,’

</div>`;

В файле модели literals.js мы объявили newDog и использовали литералы модели для создания в нем дополнительных элементов. Если вы используете console.log (newDog), вы увидите сгенерированный элемент в виде строки в консоли.

Или, если вы используете console.log (typeof newDog), он вернет строку, указывающую, что это еще не элемент DOM.

Затем мы будем использовать document.createRange () для преобразования строки в элемент DOM.

Затем мы вызываем метод createContextFragment (), который он оставляет в диапазоне. Когда вы используете console.log myFragment, вы увидите серию объектов (набор элементов или фрагмент HTML, с которым мы можем работать).

Затем мы добавляем myFragment в основную часть страницы.

ПРИМЕЧАНИЕ. Если вам действительно нужно сделать что-то вроде добавления прослушивателей событий или редактирования классов, нам сначала нужно вставить его в DOM с помощью фрагмента createcontext и поместить в тело или где-нибудь на странице.

Затем мы выбираем кнопку с классом .btn, по которой пользователи нажимают, чтобы узнать больше о собаке.

Если вы используете console.log (btn), вы обнаружите, что он находится в DOM, потому что мы внедрили его в DOM через сниппет createContext.

cloneNode

Следующий метод cloneNode позволяет создать клон узла дерева DOM. Он имеет следующий синтаксис:

elem.cloneNode (flDeep);

Если flDeep истинно, создается глубокий клон объекта со всеми его свойствами и дочерними элементами. Если false, мы получаем бездетного клона.

Когда такая операция может быть полезной? Например, у нас есть такая таблица:

Солнце Звезда
Меркурий Планета

Мы хотим добавить к нему еще одну линию с планетой Венера. Это можно сделать путем клонирования существующей строки и добавления клона в конец таблицы:

let t = document.querySelector («таблица»); let r = document.querySelector («table> tbody> tr: last-child»); let row = r.cloneNode (true); row.firstChild.innerHTML = «Венера»; t.append (строка);

Вот, теперь у нас есть еще одна линия с Венерой.

Вставка элементов и текстовых узлов

Чтобы созданный элемент (или текстовый узел) появился в нужном месте на странице, его нужно туда вставить.

Это можно сделать в JavaScript различными методами.

Некоторые из старых — это appendChild и insertBefore.

appendChild

appendChild стремится вставить узел в конец элемента (то есть после его последнего дочернего узла), для которого вызывается этот метод:

// $ elem — элемент, в который после последнего дочернего узла нужно вставить узел $ node $ elem.appendChild ($ node);

Этот метод возвращает узел, добавленный на страницу в результате.

Пример, где мы добавляем новый

в конце

Красный

Апельсин

Желтый

Зеленый

Синий

Синий

insertBefore

insertBefore используется для вставки узла перед nextSibling в $ elem:

$ elem.insertBefore (узел, nextSibling);

Если вы передадите null как nextSibling, этот метод вставит узел после последнего дочернего элемента $ elem. Они будут выполнять действия, аналогичные appendChild.

В результате метод insertBefore возвращает вставленный узел.

Например, вставим новый элемент

перед третьим:

Красный

Апельсин

Зеленый

Синий

Синий

Альт

Современные методы вставки и замены

JavaScript предоставляет следующие современные методы для вставки элементов и строк:

  • node.append — для добавления узлов или линий в конце узла;
  • node.prepend — вставить узлы или строки в начало узла;
  • node.before — для вставки узлов или строк перед узлом;
  • node.after — для вставки узлов или строк после узла.

Пример использования методов:

сообщение…

Как следствие:

первый

поставить перед

сообщение…

добавить

после

InsertAdjacent

JavaScript предоставляет набор методов insertAdjacent, которые позволяют вставлять один или несколько узлов в определенную позицию относительно $ elem.

Всего существует 3 таких метода:

  • $ elem.insertAdjacentElement (position, element) — для вставки элемента (элемента);
  • $ elem.insertAdjacentHTML (position, htmlString) — для вставки строки (htmlString) как HTML;
  • $ elem.insertAdjacentText (position, string) — для вставки строки (строки);

Значение позиции может быть одним из следующих:

  • ‘beforebegin’ — непосредственно перед $ elem;
  • ‘afterbegin’ — перед первым дочерним элементом $ elem;
  • ‘beforeend’ — после последнего дочернего элемента $ elem;
  • afterend — сразу после $ elem;

Пример использования insertAdjacentHTML:

  • CSS

Веб-технологии

HTML

CSS

JavaScript

DocumentFragment

В JavaScript есть особый тип объекта DOM: DocumentFragment. Он как бы образует фрагмент документа со своим DOM-деревом, то есть с его содержимым. Следовательно, весь контент можно вставить в любом месте HTML-документа. Возьмем простой пример. Допустим, у нас есть пустой список:

И мы хотим вставить в него подготовленный фрагмент списка. Это могло бы выглядеть так:

let fr = new DocumentFragment (); let list = «Меркурий», «Венера», «Земля», «Марс»</a>; for (пусть p списка) {let item = document.createElement (‘li’); article.innerHTML = p; fr.append (element);} let ul = document.querySelector («ul»); ul.append (фр);

Но это всего лишь один пример использования DocumentFragment. В данном случае все может быть реализовано проще:

let list = «Меркурий», «Венера», «Земля», «Марс»</a>; пусть ul = document.querySelector («ul»); for (пусть p списка) {let item = document.createElement (‘li’); article.innerHTML = p; ul.append (элемент);}

В общем, DocumentFragment используется редко. Скорее, я сказал об этом здесь для целостности изложения материала. Хотя в некоторых случаях это незаменимо, например, при создании шаблонов документов. Но это выходит за рамки данного урока.

Я также предоставлю список некоторых устаревших методов для вставки и удаления элементов, поскольку вы можете найти их в старых скриптах и ​​знать, что это такое:

  • parent.appendChild (узел) — добавить элемент в конец списка дочерних элементов;
  • parent.insertBefore (node, nextSibling) — вставить элемент перед nextSibling;
  • parent.removeChild (node) — удалить элемент узла (здесь parent — родитель узла);
  • parent.replaceChild (newElem, node) — заменяет дочерний узел новым newElem.

Все эти методы работают очевидным образом.

 

Оцените статью
Блог о JavaScript
© 2024 Блог о JavaScript