Вы здесь: Главная » JavaScript » Создание html-элементов в JavaScript

Создание html-элементов в JavaScript

В HTML мы создаём столько элементов, сколько нам нужно, в коде, добавляя и удаляя их по мере изменения страницы в соответствии с psd-макетом или потребностями сайта.

JavaScript также умеет создавать html-элементы. Для этого у него есть несколько методов. Давайте рассмотрим их.

Создание элемента. Метод document.createElement

Метод предназначен для создания тегов, или, иначе, html-элементов. Общий вид:

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

Например, нам необходимо создать элемент-div - частый гость html-страниц. Тогда метод будет использован так:

Но, как правило, этого мало. Необходимо, во-первых, задать какой-то текст внутри div-a, а во-вторых, назначить для него css-форматирование либо с помощью класса, либо с помощью id.

Для этого добавим элементу свойство id или className (подразумевается, что css-форматирование для этого id или класса у вас существует):

Что касается текста, то его добавление реализуется 2-мя способами: с помощью свойства innerHTML или метода document.createTextNode():

В первом случае вы можете добавить не только текст, но и любые html-теги.

Обратите внимание на то, что во втором случае придётся не только создать текстовый узел, но и добавить его в качестве дочернего элемента к нашему div-у. Для этого нам понадобился метод appendChild(). Синтаксис его таков:

Поскольку в модели DOM текст считается специальным текстовым узлом (еще есть узлы-элементы и узлы-комментарии), то его нужно добавлять к элементу-родителю, т.е. div-у в нашем примере.

Таким же методом будет добавлен и узел-элемент, созданный с помощью document.createElement(), причем добавляется он в самый конец родительского элемента.

Например, создадим изображение и добавим его внутрь div-а с id="picHolder":

Здесь должна появиться картинка с камнем

Нажмите на кнопочку, пожалуйста.

Обратите внимание, что картинка появилась после текста, т.е. в самом низу родительского элемента.

Если несколько раз нажать на кнопку в примере выше, изображение будет добавлено тоже несколько раз.

Использование метода insertBefore

Если вам необходимо вставить новый элемент в определенном месте, можно использовать вставку ДО определенного элемента методом insertBefore. Его синтаксис таков:

Пример: вставляем текст абзаца в div с id="text" после заголовка h2:

В этом примере firstElementChild, использованный во второй строке, является обращением к первому дочернему элементу div-a с текстом "Пока это первый абзац".

Пока это первый абзац.

Использование метода insertAdjacentHTML  и других

Это более универсальный метод, если вам необходимо вставить некий текст (изображение) внутрь другого тега или ДО тега, или ПОСЛЕ него. Для этого существуют специальные строки:

  1. "beforeBegin" - перед элементом.
  2. "afterBegin" - внутрь элемента, в самое начало, т.е. сразу за открывающим тегом.
  3. "beforeEnd" - внутрь элемента, в конец, т.е. перед закрывающим тегом.
  4. "afterEnd" - после элемента.

Методов существует 3 разновидности: для добавления текста, html-кода и элемента. Ситаксис этих методов таков:

Использовать их нужно в зависимости от потребности.

Например, вставим текст (вводите каждый раз новый текст в поле, чтобы увидеть разницу):

Место для вставки текста

Код примера (с одним из вариантов строк):

А теперь используем вставку кода html:

Дополняемый список

Добавлять будем код "<li>ваш текст внутри</li>"

  • Пункт 1
  • Пункт 2
  • Пункт 3
  • Пункт 4



В зависимости от того, какой вариант строки вы выбрали, код  будет различаться. И лучше всего это видно в инспекторе свойств браузера. Цвет нового элемента задается случайным образом, и может отличаться от приведенного на картинке.

insertadjacenthtml

В последнем примере будем добавлять один из элементов, задавая ему цвет текста случайным образом с помощью функции randomColor():

Место для вставки элемента

Как и где располагаются элементы, можно посмотреть на скриншоте или попробовать самому 🙂

insertadjacentelement

Замена элемента на другой

Если вы не хотите добавлять новый элемент в структуру уже существующего, вы можете заменить тот, что был на новый методом replaceChild(). Делается это несколько сложновато, т.к. при этом надо обратиться к родительскому элементу (узлу) и указать, что именно внутри него мы меняем на новый элемент какой-то из старых элементов.

Рассмотрим пример, в котором нам нужно заменить первый абзац внутри div-а на заголовок 3-го уровня.

Этот пример в действии:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo ipsa sunt fugiat, tenetur cumque atque?

Voluptates facere fugit itaque fuga libero nisi maxime minima, ad molestias magnam. Excepturi, quos, ratione.

Как вы, наверное, заметили, ряд методов несколько сложно воспринимается с точки зрения понимания их синтаксиса. Поэтому в совремненном JavaScript чаще используются другие методы, похожие и по названию, и по действию, но со значительно более понятным синтаксисом.

Новые методы вставки элементов в html-разметку

С внедрением стандартов ES5 и ES6 в JavaScript появились новые методы, упрощающие манипуляции со вставкой  элементов в html-разметку страницы. Не последнюю роль в этих нововведениях сыграла библиотека jQuery, т.к. в ней такие методы были реализованы уже очень давно.

Например, вместо метода appendChild() мы можем применить метод append() - и элемент появится в самом низу родительского элемента. И это еще не все. Рассмотрим новые методы:

  • elem.append(узлы или строки) – добавляет узлы или строки в конец элемента elem,т.е. после последнего его дочернего элемента, если таковой есть;
  • elem.prepend(узлы или строки) – добавляет узлы или строки в начало elem, т.е. перед первым его дочерним элементом, если таковой есть;
  • elem.before(узлы или строки) – вставляет узлы или строки до elem, т.е. перед самим элементом, а не внутри него;
  • elem.after(узлы или строки) – добавляет узлы или строки после elem, т.е. не внутрь элемента, а сразу за ним;
  • elem.replaceWith(узлы или строки) – заменяет elem заданными узлами или строками, замещая его содержимое.

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

За счет того, что родительский элемент с блоками имеет свойство display: flex, и строки, и новый блок размещаются в виде новой колонки. Но при использовании любого метода для блока, он перемещается, т.к. ни один из методов не предполагает клонирования блока. Он как бы переносится из одного места в другое, когда вы после использования метода append() решаете посмотреть на действие метода prepend() или after() для элемента.  При использовании этих же методов для строк текст строки присоединяется заново в соответствующем названию метода месте.

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

Код примера с новыми методами:

На скриншоте видно, как в Инспекторе свойств браузера Chrome расположились строки и элемент, добавленные методами append(), prepend(), before() и after().

prepend(),append(),before(),after()Еще имейте ввиду, что у вас не получится вставить, как элемент текст с разметкой, как в методе document.write(). Так код elem.before('<p>Абзац текста</p>') отобразит текст вместе с угловыми скобками, которые будут заменены на html-спецсимволы &lt; и &gt; аналогично работе свойства textContent.

Пример:

Клонирование элементов

Еще один вариант создания элементов - это получение копии уже существующего элемента методом клонирования. Синтаксис его таков:

Рассмотрим пример с клонированием списка, элементы которого выстроены в одну линию за счет свойства display: inline-block для всех элементов <li>. К списку <ol> также привязан обработчик события клика, который позволяет добавить класс active к элементу <li>, по которому был сделан клик.

В коде примера один клон - cloneOl - имеет полное повторение структуры клонируемого элемента, а второй - onlyOl - только тег <ol class="start"></ol>. Кроме того, даже у первого клона не сохранился обработчик события клика, что хорошо видно на скриншоте из консоли браузера Firefox.
элеметы после клонирования и вставки

Посмотрите сами на примере:

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

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

Об удалении элементов как с помощью JavaScript, так и с помощью jQuery можно прочитать в отдельной статье.

5 комментариев

  1. Хорошие примеры. А как удалять элементы?

  2. Хороший материал, но хотелось бы еще видеурок к нему

  3. А в ES6 что-нибудь новенькое появилось в плане создания и удаления элементов?

    • Да, появились новые методы, упрощающие написание кода. Статья обновилась - прочитайте новый раздел.

Добавить комментарий для nalu Отменить ответ

Ваш e-mail не будет опубликован. Обязательные поля помечены *