Далее на странице...
- Метод createElement Создает новый элемент c указанным именем тега document.createElement("...")
- Метод createTextNode Создает новый текстовый узел createTextNode используется редко
- Свойство className и classList className устарело и не рекомендовано для использования classList более современное и используемое свойство
- Метод add() - Добавление классов к элементу add – это метод свойства classList element.classList.add('class_name');
- Вставка элементов на страницу
- Метод append Позволяет вставить элемент в конец другого элемента
- Метод prepend Позволяет вставить элемент в начало другого элемента
- Методы before и after before - Вставить элемент перед другим элементом after - Вставить элемент после другого элемента
- Метод remove - Удаление элементов
- Метод replaceWith - Замена элементов
Не редко отдельные части сайта создаются/генерируются при помощи JavaScript. На таких принципах построен React, элементы которого состоят/созданы из скриптов.
React.js или ReactJS — JavaScript-библиотека с открытым исходным кодом для разработки пользовательских интерфейсов.
Эта статья является продолжением предыдущей. Здесь продолжается работа с элементами на странице в JavaScript.
Вы узнаете, как средствами JavaScript создать и вставить на страницу новый элемент. И как задать ему стилевое оформление при помощи классов (ранее мы работали с инлайн стилями JavaScript).
Здесь также будут рассмотрены основные методы JavaScript для работы с элементами на странице.
Метод createElement
Итак, как из JavaScript создавать новые элементы страницы?
Для этого используется метод createElement(). Это метод объекта document.
Метод createElement() объекта document создает новый элемент (пустой узел element) с указанным именем тега.
const div = document.createElement("div");
Такая запись создает новый тег div, но он существует только внутри скрипта (в js-файле): на странице он пока не отображается.
Метод createTextNode
Метод createTextNode() создает новый текстовый узел с указанным текстом.
Текстовые узлы - это элементы без оболочки тега.
const text = document.createTextNode("Здесь будет текст");
Метод document.createTextNode используется редко.
Свойство className и classList
Теперь вернемся к методу createElement() и к созданному тегу div. Теперь этому элементу можно придать какой-то стиль: добавить визуальной оболочки.
Стоит отметить, что при начальном оформлении элемента или при кардинальном изменении его стиля редко используются инлайн стили из JavaScript, так же, как и свойство cssText.
На практике, как правило, работа ведется с классами: происходит модификация классов, их добавление или удаление.
Стоит знать, что существует простое свойство className, где мы можем через пробел указать какие-то классы и таким образом добавить их к элементу. О свойстве читайте здесь.
Но свойство className устарело и не рекомендовано для использования.
Существует более современное и мощное свойство classList, где через точку указываются действия с классом: это удаление, добавление, переключение, проверка на наличие класса и даже определение количества примененных классов к элементу.
За все эти действия отвечают методы свойства classList.
Далее рассмотрим, как работает свойство classList и его методы?
Метод add() - Добавление классов к элементу
Метод add() свойства classList отвечает за добавление указанных классов к элементу.
Пример 1.1
HTML-код
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Elements - Udemy</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="box" id="box"></div>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="wrapper">
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
</div>
<script src="js/script.js"></script>
</body>
</html>
Результат в Браузере
Добавим к тегу div, созданному при помощи свойства createElement какой-либо класс.
JavaScript-код
'use strict';
// Создаем новый элемент с указанным именем тега
const div = document.createElement("div");
// Добавляем к div класс black
div.classList.add('black');
CSS-код
.black{
width: 150px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: black;
margin-bottom: 30px;
margin-top: 30px;
color: #fff;
}
Пока все это существует только внутри JavaScript. Тег div на странице не отображается.
Как реализовать появление тега div на странице?
Вставка элементов на страницу
Для вставки элементов на страницу следует воспользоваться деревом DOM.
Дело в том, что новый элемент можно вставить в конец страницы, после определенного элемента, удалить его или заменить, но только по отношению к другому элементу.
Далее разберем современные методы для работы со страницей. В устаревших браузерах они работать не будут.
Например, метод prepend не работает в 11-ой и более ранних версиях браузера Internet Explorer. Это можно увидеть на сайте caniuse.com.
Поэтому уже готовые проекты переводятся в старый стандарт JS, чтобы все пользователи могли с ними взаимодействовать. В этом не всегда возникает необходимость и этим занимается отдельная технология, которая будет рассмотрена позднее.
Метод append
Метод append позволяет вставить элемент в конец какого-либо другого (родительского) элемента.
Продолжим работать с примером 1.1 и вставим тег div в конец тега body.
Пример 2.1
JavaScript-код
'use strict';
// Создаем новый элемент с указанным именем тега
const div = document.createElement("div");
// Добавляем к div класс black
div.classList.add('black');
// Добавляем в конец body тег div
document.body.append(div);
Результат в Браузере
В результате в конце страницы появился новый тег div - это черный квадрат.
Рассмотрим другой пример работы метода append. Добавим тег div в конец другого тега div с классом wrapper - см. исходный html-код в примере 1.1.
Пример 2.2
JavaScript-код
'use strict';
// Создаем новый элемент с указанным именем тега - новый тег div
const div = document.createElement("div");
// Добавляем к новому div класс black
div.classList.add('black');
// Получаем доступ к тегу div с классом '.wrapper'
const wrapper = document.querySelector('.wrapper');
// Добавляем созданный div в конец тега div с классом '.wrapper'
wrapper.append(div);
Результат в Браузере
В консоли во вкладке Elements можно увидеть, что в конце тега div с классом wrapper появился еще один тег div с классом black.
Метод prepend
Метод prepend (обратный методу append) позволяет вставить элемент в начало какого-либо другого (родительского) элемента.
Продолжим работать с примером 2.1 и вставим тег div в начало другого тега div с классом wrapper.
Пример 3.1
JavaScript-код
'use strict';
// Создаем новый элемент с указанным именем тега - новый тег div
const div = document.createElement("div");
// Добавляем к новому div класс black
div.classList.add('black');
// Получаем доступ к тегу div с классом '.wrapper'
const wrapper = document.querySelector('.wrapper');
// Добавляем созданный div в начало тега div с классом '.wrapper'
wrapper.prepend(div);
Результат в Браузере
В начале тега div с классом wrapper появился еще один тег div с классом black. А именно: перед сердцами появился черный прямоугольник.
Методы before и after
Кроме рассмотренных выше методов append и prepend в JavaScript существуют методы before и after, которые позволяют вставить элемент перед и вставить элемент после какого-либо другого элемента.
Продолжаем работать с html-кодом из примера 1.1. И поработаем с сердцами - с элементами страницы с классом heart.
При помощи метода before вставим перед одним из сердец тег div.
Пример 4.1
JavaScript-код
'use strict';
// Доступ ко всем элементам с классом '.heart'
const hearts = document.querySelectorAll('.heart');
// Новый div
const div = document.createElement("div");
div.classList.add('black');
hearts[1].before(div);
Результат в Браузере
Метод before - перед вторым сердцем появился тег div.
Теперь с помощью метода after вставим после второго сердца тег div.
Пример 4.2
JavaScript-код
'use strict';
// Доступ ко всем элементам с классом '.heart'
const hearts = document.querySelectorAll('.heart');
// Новый div
const div = document.createElement("div");
div.classList.add('black');
hearts[1].after(div);
Результат в Браузере
Метод after - после второго сердца появился тег div.
Метод remove - Удаление элементов
Метод remove позволяет удалить элемент со страницы.
JavaScript-код
'use strict';
const circles = document.getElementsByClassName('circle');
circles[0].remove();
Результат в Браузере
Метод remove - произошло удаление одного из кругов.
Метод replaceWith - Замена элементов
Метод replaceWith позволяет заменить один элемент страницы другим.
JavaScript-код
'use strict';
const circles = document.getElementsByClassName('circle'),
hearts = document.querySelectorAll('.heart');
circles[1].replaceWith(hearts[1]);
Результат в Браузере
Метод replaceWith - произошла замена одного из кругов на сердце.
Рассмотренные здесь методы позволяют полностью управлять веб-страницей.
На практике мы точно также (как было продемонстрированно на этой странице) создаем элементы, изменяем их стилевое оформление (см. предыдущую статью), удаляем, меняем их местами и т.п.
Это и есть динамическое формирование страницы, для которого предназначен язык JavaScript.
Далее разберем устаревшие конструкции, которые, еще встречаются в коде.
