Как создать элемент html с помощью js

Как создать элемент html с помощью js

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)

Метод createElement()

HTML элементы часто содержат текст. Чтобы создать кнопку с текстом, используйте свойства innerText или innerHTML объекта элемента:

Пример

Создать элемент button с текстом:

var btn = document.createElement(«BUTTON»); // Создать элемент
btn.innerHTML = «НАЖМИТЕ НА МЕНЯ»; // Вставить текст
document.body.appendChild(btn); // Добавить к

НАЖМИТЕ НА МЕНЯ

Еще примеры «Попробуй сам» ниже.

Определение и использование

Метод createElement() создает узел элемента с указанным именем.

Совет: После создания элемента, используйте метод element.appendChild() или element.insertBefore() метод вставки его в документ.

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

Метод
createElement()	Да	Да	Да	Да	Да

Синтаксис

document.createElement(nodename)

Параметр значений

Параметр	Тип	Описание
nodename	Строка	Требуемый. Имя элемента, который вы хотите создать

Технические детали

Возвращаемое значение:	Объект элемента, представляющий созданный узел элемента
Версия DOM	Основной уровень 1 Объект документа

Еще примеры

Пример

Создать элемент

с некоторым текстом, используйте innerText для установки текста и добавьте его в документ:

var para = document.createElement(«P»); // Создайте элемент

para.innerText = «Это параграф»; // Вставить текст
document.body.appendChild(para); // Добавить

к

Пример

Создать элемент

и добавьте его к элементу :

Упражнения

КАК СДЕЛАТЬ

ПОДЕЛИТЬСЯ

СЕРТИФИКАТЫ

Сообщить об ошибке

Если вы хотите сообщить об ошибке или сделать предложение, не стесняйтесь, присылайте нам электронное письмо:

Ваше предложение:

Спасибо, за вашу помощь!

Ваше сообщение было отправлено в SchoolsW3.

Топ Учебники

Топ Справочники

Топ Примеры

Веб Сертификаты

SchoolsW3 оптимизирован для обучения, тестирования и тренировки. Примеры упрощают и улучшают чтение и базовое понимание.Учебники, справочники, примеры постоянно пересматриваются, для того, чтобы избежать ошибки, невозможно гарантировать правильность всего содержимого.Используя данный сайт, вы соглашаетесь прочитать и принять условия использования, cookie и Политика конфиденциальности.Авторское право 1999 — 2022 Все права защищены.
Работает на W3.CSS.

Как добавить элемент в 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);