как удалить html код с помощью js
Удаление элемента простым JavaScript remove() методом
Как вы знаете, DOM не поддерживает удаления элемента напрямую. При удалении элемента с JavaScript, вы должны сначала перейти на его родителей. Это процесс всегда был странным и не таким простым.
Согласно DOM Уровень 4 функции, который является текущей версией в разработке, существуют новые удобные методы мутации: append(), prepend(), before(), after(), replace(), и remove(). В этой статье, мы сосредоточимся на JavaScript remove() методе.
Пуленепробиваемый путь
Предположим, что у нас есть следующий HTML элемент:
… чтобы удалить его из дерева DOM, вам нужно будет выполнить следующие линии JavaScript’а:
Путем jQuery
Если вы используете JavaScript фреймворк, такой как jQuery, тогда для взятия элемента из DOM, вам нужно использовать remove() метод:
Обратили внимание на сходство с jQuery? Этот новый способ является более простым и интуитивным.
Поддержка браузеров
На данный момент поддерживаются следующие браузеры: Chrome, Opera, Safari и скоро Firefox 23. Может быть это не так здорово для производственных целей, но все же отлично подходит для тестирования и отладки.
Однако, если вы ищете большую поддержку браузеров, тогда есть polyfills, за которыми стоит следить:
Добавление и удаление элемента в JavaScript
Создание элемента
Прежде чем добавить новый элемент на страницу, его нужно сначала создать. Метод createElement() создаёт элемент.
Созданный элемент сразу присваивается переменной, через которую осуществляется дальнейшая работа с элементом. После того, как элемент создан ему можно установить id, класс, другие атрибуты и задать стиль. О том, как это делается, будет рассказано в следующих темах. Также его можно наполнить содержимимым. Перечисленные действия лучше сделать до добавления элемента на страницу, чтобы он сразу отобразился в том виде, в котором должен быть. Но можно это сделать и после добавления, большой разницы нет.
Для примера создадим блок и добавим в него текст:
Пока блок не отображается, ведь он ещё не добавлен на страницу.
Добавление элемента
внешний элемент.appendChild (добавляемый элемент)
Добавим блок на страницу:
В качестве внешнего элемента был использован body, но точно так же можно добавлять внутрь любого другого элемента.
внешний элемент.insertBefore (добавляемый элемент, предыдущий элемент)
Для примера создадим на странице блок с абзацами и с помощью скрипта добавим ещё один абзац в начало блока:
Чтобы код был более понятным, я создал отдельную переменную для абзаца, перед которым вставляется элемент. На практике так делать совсем не обязательно. Можно указать абзац сразу как дочерний элемент блока.
Если нужно вставить элемент не в начало блока а в середину, то нужно просто указать другой элемент, перед которым нужно вставить новый элемент.
Рассмотренные методы могут быть использованы не только для добавления элемента, но и для перемещения. Любому элементу на странице можно указать новое место и он будет туда перемещён.
Удаление элемента
внешний элемент.removeChild (удаляемый элемент)
Удалим абзац из блока:
Коприрование материалов сайта возможно только с согласия администрации
Изменение документа
Модификации DOM – это ключ к созданию «живых» страниц.
Здесь мы увидим, как создавать новые элементы «на лету» и изменять уже существующие.
Пример: показать сообщение
Создание элемента
DOM-узел можно создать двумя методами:
Создаёт новый элемент с заданным тегом:
Создаёт новый текстовый узел с заданным текстом:
Создание сообщения
В нашем случае сообщение – это div с классом alert и HTML в нём:
Мы создали элемент, но пока он только в переменной. Мы не можем видеть его на странице, поскольку он не является частью документа.
Методы вставки
Вот методы для различных вариантов вставки:
Вот пример использования этих методов, чтобы добавить новые элементы в список и текст до/после него:
Наглядная иллюстрация того, куда эти методы вставляют:
Итоговый список будет таким:
Эти методы могут вставлять несколько узлов и текстовых фрагментов за один вызов.
Например, здесь вставляется строка и элемент:
Весь текст вставляется как текст.
Поэтому финальный HTML будет:
Поэтому эти методы могут использоваться только для вставки DOM-узлов или текстовых фрагментов.
insertAdjacentHTML/Text/Element
Первый параметр – это специальное слово, указывающее, куда по отношению к elem производить вставку. Значение должно быть одним из следующих:
Второй параметр – это HTML-строка, которая будет вставлена именно «как HTML».
Так мы можем добавлять произвольный HTML на страницу.
Мы можем легко заметить сходство между этой и предыдущей картинкой. Точки вставки фактически одинаковые, но этот метод вставляет HTML.
У метода есть два брата:
Так что, вот альтернативный вариант показа сообщения:
Удаление узлов
Например, сделаем так, чтобы наше сообщение удалялось через секунду:
Если нам нужно переместить элемент в другое место – нет необходимости удалять его со старого.
Все методы вставки автоматически удаляют узлы со старых мест.
Например, давайте поменяем местами элементы:
Клонирование узлов: cloneNode
Как вставить ещё одно подобное сообщение?
Мы могли бы создать функцию и поместить код туда. Альтернатива – клонировать существующий div и изменить текст внутри него (при необходимости).
Иногда, когда у нас есть большой элемент, это может быть быстрее и проще.
Пример копирования сообщения:
DocumentFragment
DocumentFragment является специальным DOM-узлом, который служит обёрткой для передачи списков узлов.
Мы можем добавить к нему другие узлы, но когда мы вставляем его куда-то, он «исчезает», вместо него вставляется его содержимое.
DocumentFragment редко используется. Зачем добавлять элементы в специальный вид узла, если вместо этого мы можем вернуть массив узлов? Переписанный пример:
Мы упоминаем DocumentFragment в основном потому, что он используется в некоторых других областях, например, для элемента template, который мы рассмотрим гораздо позже.
Устаревшие методы вставки/удаления
Есть несколько других, более старых, методов вставки и удаления, которые существуют по историческим причинам.
Мы упоминаем о них только потому, что их можно найти во многих старых скриптах:
Чтобы вставить newLi в начало, мы можем сделать вот так:
Удаляет node из parentElem (предполагается, что он родитель node ).
Несколько слов о «document.write»
Вызов document.write(html) записывает html на страницу «прямо здесь и сейчас». Строка html может быть динамически сгенерирована, поэтому метод достаточно гибкий. Мы можем использовать JavaScript, чтобы создать полноценную веб-страницу и записать её в документ.
Этот метод пришёл к нам со времён, когда ещё не было ни DOM, ни стандартов… Действительно старые времена. Он всё ещё живёт, потому что есть скрипты, которые используют его.
В современных скриптах он редко встречается из-за следующего важного ограничения:
Вызов document.write работает только во время загрузки страницы.
Если вызвать его позже, то существующее содержимое документа затрётся.
Так что после того, как страница загружена, он уже непригоден к использованию, в отличие от других методов DOM, которые мы рассмотрели выше.
Это его недостаток.
Есть и преимущество. Технически, когда document.write запускается во время чтения HTML браузером, и что-то пишет в документ, то браузер воспринимает это так, как будто это изначально было частью загруженного HTML-документа.
Поэтому он работает невероятно быстро, ведь при этом нет модификации DOM. Метод пишет прямо в текст страницы, пока DOM ещё в процессе создания.
Так что, если нам нужно динамически добавить много текста в HTML, и мы находимся на стадии загрузки, и для нас очень важна скорость, это может помочь. Но на практике эти требования редко сочетаются. И обычно мы можем увидеть этот метод в скриптах просто потому, что они старые.
Итого
Методы для создания узлов:
Вставка и удаление:
Если нужно вставить фрагмент HTML, то elem.insertAdjacentHTML(where, html) вставляет в зависимости от where :
Чтобы добавить HTML на страницу до завершения её загрузки:
После загрузки страницы такой вызов затирает документ. В основном встречается в старых скриптах.
Как удалить html код с помощью js
В этой рубрике Вы найдете уроки по Javascript библиотеке jQuery.
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.
Stimed — стили в зависимости от времени суток
Интересная библиотека с помощью которой можно задать определённым элементам страницы особые стили в зависимости от времени суток.
jQuery плагин для отображения превью загружаемого файла
Небольшой jQuery плагин, который позволит увидеть миниатюру изображения ещё до загрузки на сервер.
Удаление html-элементов в JavaScript
Удаление html-элементов методом removeChild()
Метод removeChild() существует достаточно давно, поэтому им стоит пользоваться там, где нужна поддержка старых браузеров. Однако с ним стоит быть внимательным, т.к. «удалить ребенка» (именно так переводится этот метод с английского) можно только у его родителя. Т.е. при использовании этого метода код будет такой:
Давайте рассмотрим удаление элементов на примере списка:
Удаление методом remove()
По сравнению с removeChild() метод remove() прост и понятен:
В этом примере использован метод setInterval() для формирования постепенного исчезновения блока.
Исчезающий блок 1
Исчезающий блок 2
Исчезающий блок 3
Исчезающий блок 4
Для браузеров, не поддерживающих данный метод (и ряд других), можно использовать полифилы DOM4 или DOMShim.
Удаление всех элементов внутри родителя
Этот способ сработает достаточно быстро, но в некоторых браузерах будет быстрее вариант с удалением всех узлов элемента при отслеживании наличия у него вложенных элементов-потомков, или детей. Это можно сделать несколькими способами:
В примере ниже мы используем различные виды удаления вложенных элементов списка с возможностью его восстановить и попробовать другие.
Удаление элементов в jQuery
В jQuery один элемент вы удаляете с помощью метода remove(), а для удаления всех вложенных элементов есть метод empty(). Само собой, что вы должны сначала подключить эту библиотеку, скачав ее на оффсайте или используя CDN. При использовании обоих методов все данные, включая обработчики событий, удаляются вместе с элементом.
Пример с использованием методов jQuery remove() и empty()
Текст 1-го абзаца внутри div#myDiv
Текст 2-го абзаца внутри div#myDiv
Текст 3-го абзаца внутри div#myDiv