Как добавить элемент на страницу в javascript
Перейти к содержимому

Как добавить элемент на страницу в javascript

  • автор:

Как добавить элемент на страницу в javascript

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

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

Для создания элементов объект document имеет следующие методы:

  • createElement(elementName) : создает элемент html, тег которого передается в качестве параметра. Возвращает созданный элемент
  • createTextNode(text) : создает и возвращает текстовый узел. В качестве параметра передается текст узла.

Создадим элемент с помощью createElement :

const header = document.createElement("h1"); // создаем заголовок console.log(header); //

Таким образом, переменная header будет хранить ссылку на элемент h1 .

Создадим текстовый узел с помощью createTextNode :

const headerText = document.createTextNode("Hello World"); // создаем текстовый узел console.log( headerText); // "Hello World"

Добавление элементов

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

Для добавления элементов мы можем использовать один из методов объекта Node:

  • appendChild(newNode) : добавляет новый узел newNode в конец коллекции дочерних узлов
  • insertBefore(newNode, referenceNode) : добавляет новый узел newNode перед узлом referenceNode
appendChild

Используем метод appendChild() :

const header = document.createElement("h1"); // создаем заголовок 

const headerText = document.createTextNode("Hello World"); // создаем текстовый узел header.appendChild( headerText); // добавляем в элемент h1 текстовый узел console.log(header); //

Hello World

И чтобы добавить созданный элемент на страницу, его надо добавить в уже имеющийся на странице элемент:

    METANIT.COM      

Сначала создаем обычный элемент заголовка h2 и текстовый узел. Затем текстовый узел добавляем в элемент заголовка. Затем заголовок добавляем в элемент body :

Добавление элемента на веб-страницу в JavaScript

Стоит отметить, что нам необязательно для определения текста внутри элемента создавать дополнительный текстовый узел, так как мы можем воспользоваться свойством textContent и напрямую ему присвоить текст:

const header = document.createElement("h1"); // создаем заголовок header.textContent = "Hello World"; // определяем текст элемента

В этом случае текстовый узел будет создан неявно при установке текста.

insertBefore

Метод appendChild() добавляет элемент в конец контейнера. Чтобы более конкретизировать место для добавления, можно использовать другой метод — insertBefore() , который добавляет один элемент перед другим элементом. Например, у нас есть следующая страница:

    METANIT.COM  

Text 1

Text 2

Допустим, нам надо добавить в элемент body перед первым параграфом заголовок. Мы можем сделать это так:

    METANIT.COM  

Text 1

Text 2

Добавление элемента на веб-страницу в JavaScript с помощью метода insertBefore

Если нам надо вставить новый узел на второе, третье или любое другое место, то нам надо найти узел, перед которым надо вставлять, с помощью комбинаций свойств firstElementChild/lastElementChild и nextSibling/previousSibling.

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

Иногда элементы бывают довольно сложными по составу, и гораздо проще их скопировать, чем с помощью отдельных вызовов создавать из содержимое. Для копирования уже имеющихся узлов у объекта Node можно использовать метод cloneNode() :

    METANIT.COM   

Home Page

Text 1

Text 2

В метод cloneNode() в качестве параметра передается логическое значение: если передается true, то элемент будет копироваться со всеми дочерними узлами; если передается false — то копируется без дочерних узлов. То есть в данном случае мы копируем узел со всем его содержимым и потом добавляем в конец элемента c .

Клонирование элементов веб-страницы в JavaScript

Замена элемента

Для замены элемента применяется метод replaceChild(newNode, oldNode) объекта Node. Этот метод в качестве первого параметра принимает новый элемент, который заменяет старый элемент oldNode, передаваемый в качестве второго параметра.

    METANIT.COM   

Home Page

Text 1

Text 2

В данном случае заменяем первый элемент — первый параграф заголовком h2:

Замена элемента веб-страницы в JavaScript

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

Для удаления элемента вызывается метод removeChild() объекта Node. Этот метод удаляет один из дочерних узлов:

    METANIT.COM   

Home Page

Text 1

Text 2

В данном случае удаляется первый параграф из блока div

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

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

Home Page

Text 1

Text 2

const article = document.getElementById(«article»); while(article.firstChild)

Метод insertBefore

Метод insertBefore позволяет вставить элемент перед другим элементом. Чаще всего используется после создания элемента с помощью createElement . Метод применяется к родителю того элемента, перед которым произойдет вставка.

Синтаксис

родитель.insertBefore(элемент, перед кем вставить);

Пример

Создадим абзац и поместим его перед вторым абзацем:

elem 1

elem 2

elem 3

let parent = document.querySelector(‘#parent’); let before = document.querySelector(‘#before’); let p = document.createElement(‘p’); p.textContent = ‘!’; parent.insertBefore(p, before);

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

Пример

Добавим абзац в начало элемента #parent . Для этого вставим наш абзац перед первым потомком #parent . Этого потомка можно найти с помощью firstElementChild :

elem 1

elem 2

let parent = document.querySelector(‘#parent’); let p = document.createElement(‘p’); p.textContent = ‘!’; parent.insertBefore(p, parent.firstElementChild);

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

Пример

При передаче вторым параметром null метод insertBefore срабатывает как appendChild . В то же время, если в элементе нет дочерних элементов, firstElementChild возвращает null . Следовательно, добавлять в начало элемента можно даже тогда, когда в нем нет дочерних элементов:

let parent = document.querySelector(‘#parent’); let p = document.createElement(‘p’); p.textContent = ‘!’; parent.insertBefore(p, parent.firstChild);

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

Смотрите также

  • метод prepend ,
    который вставляет элементы в начало
  • метод appendChild ,
    который вставляет элементы в конец родителя
  • метод insertAdjacentElement ,
    который вставляет элемент в заданное место
  • метод insertAdjacentHTML ,
    который вставляет теги в заданное место

Element.append()

Метод Element.append() вставляет узлы или строки с текстом в конец Element . Строки с текстом вставляются как текстовое содержимое .

  • Метод Element.append() позволяет вставлять строки с текстом , в то время как Node.appendChild() работает только с узлами .
  • При вызове метод Element.append() ничего не возвращает, в то время как Node.appendChild() возвращает вставленный узел .
  • С помощью Element.append() можно вставить сразу несколько узлов или строк текста, в то время как Node.appendChild() умеет вставлять по одной сущности за раз.

Синтаксис

append(. nodesOrDOMStrings); 

Аргументы

Один или несколько узлов или строк с текстом , которые необходимо вставить.

Исключения

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

Примеры

Вставка элемента

let div = document.createElement("div"); let p = document.createElement("p"); div.append(p); console.log(div.childNodes); // NodeList [ 

]

Вставка текста

let div = document.createElement("div"); div.append("Какой-то текст"); console.log(div.textContent); // "Какой-то текст" 

Вставка и текста, и элемента сразу

let div = document.createElement("div"); let p = document.createElement("p"); div.append("Какой-то текст", p); console.log(div.childNodes); // NodeList [ #text "Какой-то текст", 

]

Область видимости метода нерасширяема

Метод append() не работает с оператором with . Подробнее читайте в справке по Symbol.unscopables .

let div = document.createElement("div"); with (div)  append("foo"); > // ReferenceError: append is not defined 

Спецификации

Specification
DOM Standard
# ref-for-dom-parentnode-append①

Поддержка браузерами

BCD tables only load in the browser

Смотрите также

  • Element.prepend() (en-US)
  • Node.appendChild()
  • Element.after() (en-US)
  • Element.insertAdjacentElement()
  • NodeList

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Как добавить элемент в html через js

Добавить элемент в html через js можно с помощью метода document.createElement() . Предположим, что у нас есть следующий html документ:

 class="container">

Внутрь данного контейнера мы хотим поместить заголовок первого уровня красного цвета с надписью Hello, World!

// получаем контейнер const container = document.querySelector('.container'); // создаем новый элемент - заголовок первого уровня const h1 = document.createElement('h1'); // добавляем класс .red, в котором указан нужный нам цвет текста h1.classList.add('red'); // добавляем нужный текст h1.textContent = 'Hello, World!'; // кладем заголовок в контейнер container.append(h1); 

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

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