Вы здесь: Главная » 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

2 комментария

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

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

Добавить комментарий

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