Удалить элемент html javascript

Удалить элемент html javascript

Модификации DOM – это ключ к созданию «живых» страниц.

Здесь мы увидим, как создавать новые элементы «на лету» и изменять уже существующие.

Пример: показать сообщение

Рассмотрим методы на примере – а именно, добавим на страницу сообщение, которое будет выглядеть получше, чем alert .

Это был пример HTML. Теперь давайте создадим такой же div , используя JavaScript (предполагаем, что стили в HTML или во внешнем CSS-файле).

Создание элемента

DOM-узел можно создать двумя методами:

Создаёт новый элемент с заданным тегом:

Создаёт новый текстовый узел с заданным текстом:

Создание сообщения

В нашем случае сообщение – это div с классом alert и HTML в нём:

Мы создали элемент, но пока он только в переменной. Мы не можем видеть его на странице, поскольку он не является частью документа.

Методы вставки

Чтобы наш div появился, нам нужно вставить его где-нибудь в document . Например, в document.body .

Для этого есть метод append , в нашем случае: document.body.append(div) .

Вот полный пример:

Вот методы для различных вариантов вставки:

  • node.append(. nodes or strings) – добавляет узлы или строки в конец node ,
  • node.prepend(. nodes or strings) – вставляет узлы или строки в начало node ,
  • node.before(. nodes or strings) –- вставляет узлы или строки до node ,
  • node.after(. nodes or strings) –- вставляет узлы или строки после node ,
  • node.replaceWith(. nodes or strings) –- заменяет node заданными узлами или строками.

Вот пример использования этих методов, чтобы добавить новые элементы в список и текст до/после него:

Наглядная иллюстрация того, куда эти методы вставляют:

Итоговый список будет таким:

Эти методы могут вставлять несколько узлов и текстовых фрагментов за один вызов.

Например, здесь вставляется строка и элемент:

Весь текст вставляется как текст.

Поэтому финальный HTML будет:

Другими словами, строки вставляются безопасным способом, как делает это elem.textContent .

Поэтому эти методы могут использоваться только для вставки DOM-узлов или текстовых фрагментов.

А что, если мы хотим вставить HTML именно «как html», со всеми тегами и прочим, как делает это elem.innerHTML ?

insertAdjacentHTML/Text/Element

С этим может помочь другой, довольно универсальный метод: elem.insertAdjacentHTML(where, html) .

Первый параметр – это специальное слово, указывающее, куда по отношению к elem производить вставку. Значение должно быть одним из следующих:

  • "beforebegin" – вставить html непосредственно перед elem ,
  • "afterbegin" – вставить html в начало elem ,
  • "beforeend" – вставить html в конец elem ,
  • "afterend" – вставить html непосредственно после elem .

Второй параметр – это HTML-строка, которая будет вставлена именно «как HTML».

Так мы можем добавлять произвольный HTML на страницу.

Мы можем легко заметить сходство между этой и предыдущей картинкой. Точки вставки фактически одинаковые, но этот метод вставляет HTML.

У метода есть два брата:

  • elem.insertAdjacentText(where, text) – такой же синтаксис, но строка text вставляется «как текст», вместо HTML,
  • elem.insertAdjacentElement(where, elem) – такой же синтаксис, но вставляет элемент elem .

Они существуют, в основном, чтобы унифицировать синтаксис. На практике часто используется только insertAdjacentHTML . Потому что для элементов и текста у нас есть методы append/prepend/before/after – их быстрее написать, и они могут вставлять как узлы, так и текст.

Так что, вот альтернативный вариант показа сообщения:

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

Для удаления узла есть методы node.remove() .

Например, сделаем так, чтобы наше сообщение удалялось через секунду:

Если нам нужно переместить элемент в другое место – нет необходимости удалять его со старого.

Читайте также:  Режим achi жесткого диска для чего

Все методы вставки автоматически удаляют узлы со старых мест.

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

Клонирование узлов: cloneNode

Как вставить ещё одно подобное сообщение?

Мы могли бы создать функцию и поместить код туда. Альтернатива – клонировать существующий div и изменить текст внутри него (при необходимости).

Иногда, когда у нас есть большой элемент, это может быть быстрее и проще.

  • Вызов elem.cloneNode(true) создаёт «глубокий» клон элемента – со всеми атрибутами и дочерними элементами. Если мы вызовем elem.cloneNode(false) , тогда клон будет без дочерних элементов.

Пример копирования сообщения:

DocumentFragment

DocumentFragment является специальным DOM-узлом, который служит обёрткой для передачи списков узлов.

Мы можем добавить к нему другие узлы, но когда мы вставляем его куда-то, он «исчезает», вместо него вставляется его содержимое.

Например, getListContent ниже генерирует фрагмент с элементами
, которые позже вставляются в

    :

Обратите внимание, что на последней строке с (*) мы добавляем DocumentFragment , но он «исчезает», поэтому структура будет:

DocumentFragment редко используется. Зачем добавлять элементы в специальный вид узла, если вместо этого мы можем вернуть массив узлов? Переписанный пример:

Мы упоминаем DocumentFragment в основном потому, что он используется в некоторых других областях, например, для элемента template, который мы рассмотрим гораздо позже.

Устаревшие методы вставки/удаления

Есть несколько других, более старых, методов вставки и удаления, которые существуют по историческим причинам.

Сейчас уже нет причин их использовать, так как современные методы append , prepend , before , after , remove , replaceWith более гибкие и удобные.

Мы упоминаем о них только потому, что их можно найти во многих старых скриптах:

Добавляет node в конец дочерних элементов parentElem .

Следующий пример добавляет новый
в конец

    :

Вставляет node перед nextSibling в parentElem .

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

Чтобы вставить newLi в начало, мы можем сделать вот так:

Заменяет oldChild на node среди дочерних элементов parentElem .

Удаляет node из parentElem (предполагается, что он родитель node ).

Этот пример удалит первый
из

    :

Все эти методы возвращают вставленный/удалённый узел. Другими словами, parentElem.appendChild(node) вернёт node . Но обычно возвращаемое значение не используют, просто вызывают метод.

Несколько слов о «document.write»

Есть ещё один, очень древний метод добавления содержимого на веб-страницу: document.write .

Вызов document.write(html) записывает html на страницу «прямо здесь и сейчас». Строка html может быть динамически сгенерирована, поэтому метод достаточно гибкий. Мы можем использовать JavaScript, чтобы создать полноценную веб-страницу и записать её в документ.

Этот метод пришёл к нам со времён, когда ещё не было ни DOM, ни стандартов… Действительно старые времена. Он всё ещё живёт, потому что есть скрипты, которые используют его.

В современных скриптах он редко встречается из-за следующего важного ограничения:

Вызов document.write работает только во время загрузки страницы.

Если вызвать его позже, то существующее содержимое документа затрётся.

Так что после того, как страница загружена, он уже непригоден к использованию, в отличие от других методов DOM, которые мы рассмотрели выше.

Это его недостаток.

Есть и преимущество. Технически, когда document.write запускается во время чтения HTML браузером, и что-то пишет в документ, то браузер воспринимает это так, как будто это изначально было частью загруженного HTML-документа.

Поэтому он работает невероятно быстро, ведь при этом нет модификации DOM. Метод пишет прямо в текст страницы, пока DOM ещё в процессе создания.

Читайте также:  Градиент от белого к прозрачному

Так что, если нам нужно динамически добавить много текста в HTML, и мы находимся на стадии загрузки, и для нас очень важна скорость, это может помочь. Но на практике эти требования редко сочетаются. И обычно мы можем увидеть этот метод в скриптах просто потому, что они старые.

Итого

Методы для создания узлов:

  • document.createElement(tag) – создаёт элемент с заданным тегом,
  • document.createTextNode(value) – создаёт текстовый узел (редко используется),
  • elem.cloneNode(deep) – клонирует элемент, если deep==true , то со всеми дочерними элементами.

Вставка и удаление:

  • node.append(. nodes or strings) – вставляет в node в конец,
  • node.prepend(. nodes or strings) – вставляет в node в начало,
  • node.before(. nodes or strings) –- вставляет прямо перед node ,
  • node.after(. nodes or strings) –- вставляет сразу после node ,
  • node.replaceWith(. nodes or strings) –- заменяет node .
  • node.remove() –- удаляет node .
  • parent.appendChild(node)
  • parent.insertBefore(node, nextSibling)
  • parent.removeChild(node)
  • parent.replaceChild(newElem, node)

Все эти методы возвращают node .

Если нужно вставить фрагмент HTML, то elem.insertAdjacentHTML(where, html) вставляет в зависимости от where :

  • "beforebegin" – вставляет html прямо перед elem ,
  • "afterbegin" – вставляет html в elem в начало,
  • "beforeend" – вставляет html в elem в конец,
  • "afterend" – вставляет html сразу после elem .

Также существуют похожие методы elem.insertAdjacentText и elem.insertAdjacentElement , они вставляют текстовые строки и элементы, но они редко используются.

Чтобы добавить HTML на страницу до завершения её загрузки:

После загрузки страницы такой вызов затирает документ. В основном встречается в старых скриптах.

Задачи

createTextNode vs innerHTML vs textContent

У нас есть пустой DOM-элемент elem и строка text .

Какие из этих 3-х команд работают одинаково?

  1. elem.append(document.createTextNode(text))
  2. elem.innerHTML = text
  3. elem.textContent = text

решение

Ответ: 1 и 3.

Результатом обеих команд будет добавление text «как текст» в elem .

Метод removeChild позволяет удалить элемент. Применяется к родительскому элементу с указанием элемента, который нужно удалить.

Синтаксис

Пример

Давайте удалим абзац #elem. Для этого получим его родителя #parent и метод removeChild применим к полученному родителю, а параметром метода передадим элемент, который хотим удалить:

Результат выполнения кода:

Пример

Если нужно удалить элемент, но ссылки на его родителя нет, — родителя можно получить через parentElement:

В JavaScript можно создавать элементы с нуля и добавлять их в уже существующую html-разметку (см. статью "Создание html-элементов в JavaScript"). Однако нередко возникает вопрос — а как удалить уже существующие элементы? Давайте рассмотрим способы.

Удаление элементов методом removeChild

Метод removeChild() существует достаточно давно, поэтому им стоит пользоваться там, где нужна поддержка старых браузеров. Однако с ним стоит быть внимательным, т.к. "удалить ребенка" (именно так переводится этот метод с английского) можно только у его родителя. Т.е. при использовании этого метода код будет такой:

Давайте рассмотрим удаление элементов на примере списка:

В этом примере мы назначаем обработчик клика каждому элементу

  • списка
      и в нем удаляем этот элемент
  • . Посмотрите, насколько запутанной получилась строчка this.parentNode.removeChild(this) . Тем не менее интерпретатор JavaScript браузера ее отлично понимает, т.к. мы говорим ему, что нужно сначала найти родительский узел этого элемента
  • ( this.parentNode ), т.е.
      , а затем удалить дочерний узел с именно этим элементом ( removeChild(this) ). Для того чтобы убедиться, кто родитель, кто потомок, мы используем console.log() для просмотра элементов:
    • Элемент списка 1
    • Элемент списка 2
    • Элемент списка 3
    • Элемент списка 4
    • Элемент списка 5
    Читайте также:  Как взломать игры на ios jailbreak

    Удаление методом remove()

    По сравнению с removeChild() метод remove() прост и понятен:

    Т.е. все, что вам нужно сделать — это обратиться к элементу и вызвать метод remove() . Рассмотрим его также на примере, в котором по клику будут исчезать однотипные html-блоки:

    В этом примере использован метод setInterval() для формирования постепенного исчезновения блока.

    Исчезающий блок 1

    Исчезающий блок 2

    Исчезающий блок 3

    Исчезающий блок 4

    Поскольку метод remove() относится к новому стандарту, он совсем не поддерживается в Internet Explorer (до 11 версии включительно), Opera Mini (она вообще мало, что поддерживает из новых стандартов), а в более прогрессивных Chrome & Firefox поддержка есть с 23 версии, в Opera — с 15, в Safari — с 7, т.е. примерно с 2012 года. Более полная информация — на сайте caniuse.com:

    Для браузеров, не поддерживающих данный метод (и ряд других), можно использовать полифилы DOM4 или DOMShim.

    Удаление всех элементов внутри родителя

    Часто бывает такая ситуация, что внутри родительского элемента необходимо удалить все узлы-потомки. Например, в том же списке нужно оставить

      или

        с каким-либо id , но удалить все вложенные
        . Для этого можно воспользоваться свойством innerHTML или innerText , или же textContent , присвоив в него пустую строку:

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

    Переменная node в приведенных примерах — это тот элемент (узел), в котором нужно удалить вложенные (дочерние) элементы.

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

    • Элемент списка 1
    • Элемент списка 2
    • Элемент списка 3
    • Элемент списка 4
    • Элемент списка 5

    Заменить пустой строкой innerHTML innerText textContent Вернуть список Удалить все элементы li

    Удаление элементов в jQuery

    В jQuery один элемент вы удаляете с помощью метода remove(), а для удаления всех вложенных элементов есть метод empty(). Само собой, что вы должны сначала подключить эту библиотеку, скачав ее на оффсайте или используя CDN. При использовании обоих методов все данные, включая обработчики событий, удаляются вместе с элементом.

    Пример с использованием методов jQuery remove() и empty()

    Давайте используем оба метода jQuery — remove() и empty() — в примере: при клике на любом из абзацев вы удаляете только этот абзац, при клике на кнопке — удаляете все содержимое

    Текст 1-го абзаца внутри div#myDiv

    Текст 2-го абзаца внутри div#myDiv

    Текст 3-го абзаца внутри div#myDiv

    Метод jQuery elem.detach()

    Можно также использовать метод detach(), который не удаляет данные и обработчики событий вместе с элементами. Он хорош в том случае, если вы планируете после каких-либо действий вернуть элементы на свое бывшее или в другое место. Например, мы можем перемещать ul между 2-мя блоками, используя метод detach() для удаления списка из первого элемента и метод appendTo() для добавления этого списка во второй блок. Удаленный список мы сохраняем в переменную, которую используем при добавлении списка во второй, а затем и в первый блок. При этом можно заметить, что при клике на элементах li нашего перемещаемого списка срабатывают собственные события клика, которые изменяют его внешний вид за счет добавления/удаления класса different .

    Ссылка на основную публикацию
    Удаление последнего элемента списка
    Введение. Основные операции О дносвязный список – структура данных, в которой каждый элемент (узел) хранит информацию, а также ссылку на...
    Телефон самсунг с хорошей камерой недорогой
    Если вы ищете лучший телефон Samsung, тогда рейтинг поможет разобраться в их различиях. Посмотрите какой смартфон лучшие купить из всех...
    Телефон перестал заряжаться быстрой зарядкой
    Наверняка многие сталкивались с тем, что смартфон ни с того ни с сего перестаёт заряжаться. Другая распространённая беда — слишком...
    Удаление дубликатов фотографий на русском бесплатно
    Здравствуйте Уважаемый Друг. У каждого из нас на компьютере хранится большое количество различных фотографий изображений и тому подобных картинок. Парой...
    Adblock detector