Как добавить элемент на страницу в 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
 

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

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

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

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

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

insertBefore

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

      
Text 1
 
Text 2
   

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

      
Text 1
 
Text 2
   

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

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

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

       
Home Page
 
Text 1
 
Text 2
 
    

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

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

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

       
Home Page
 
Text 1
 
Text 2
 
    

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

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

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

       
Home Page
 
Text 1
 
Text 2
 
    

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

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

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

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

Метод insertBefore

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

Синтаксис

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

Пример

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

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

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

Пример

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

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">

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