Далее на странице...
Если Вы научились манипулировать положением элементов на странице (см. заметки "Действия с элементами - ..."), то дальше нужно знать, как добавить текст или HTML-код непосредственно в элементы?
Работая с примером 2.1 из прошлой статьи, мы имели дело с простым элементом, у которого есть оболочка - это тег div и какое-то оформление - это класс black. Больше ничего этот элемент не содержит.
Здесь мы продолжим работать с тегом div - будем его редактировать. Допустим нам нужно вписать в него какой-то текст. Как это сделать?
Для этого существует два метода: innerHTML и textContent. А также метод insertAdjacentHTML, который позволяет вставить текст или код в любое место страницы.
Метод innerHTML - Вставка текста
Метод innerHTML позволяет вставить текст.
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>
JavaScript-код
'use strict';
// Создаем новый элемент с указанным именем тега
const div = document.createElement("div");
// Добавляем к div класс black
div.classList.add('black');
// Добавляем в конец body тег div
document.body.append(div);
// Вставка текста в тег div
div.innerHTML = "Hello world";
Результат в Браузере
В тег div добавили текст Hello world.
Метод innerHTML - Вставка HTML-кода
Метод innerHTML позволяет вставить HTML-код.
Продолжим работать с предыдущим примером.
JavaScript-код
'use strict';
const div = document.createElement("div");
div.classList.add('black');
document.body.append(div);
// Вставка кода
div.innerHTML = "<h1>Hello world</h1>";
Результат в Браузере
Текст Hello world заключили в заголовок h1 ("Hello world" теперь не умещается в область тега div).
Метод textContent - Вставка текста
Метод textContent позволяет вставить текст.
JavaScript-код
'use strict';
const div = document.createElement("div");
div.classList.add('black');
document.body.append(div);
// Вставка текста в тег div
div.textContent = "textContent";
Результат в Браузере
В отличии от метода innerHTML - метод textContent работает только с текстом.
Если при помощи метода textContent пробовать вставить код, то он будет преобразован в строку.
Метод insertAdjacentHTML
Напоследок ответим на вопрос, как вставить HTML-код перед или после определенных тегов? Для этого существует метод insertAdjacentHTML.
Метод insertAdjacentHTML позволяет вставить HTML-код в любое место страницы.
Синтаксис метода insertAdjacentHTML
Сначала указывается элемент, относительно которого проводятся действия, и который называется опорным элементом.
опорный элемент.insertAdjacentHTML("ключевое слово", "код");
Метод insertAdjacentHTML принимает два аргумента: первый - это одно из ключевых слов: afterbegin, afterend, beforebegin или beforeend. Второй аргумент метода insertAdjacentHTML - это HTML-код, который мы хотим вставить.
JavaScript-код
'use strict';
// Создаем новый элемент с указанным именем тега
const div = document.createElement("div");
// Добавляем к div класс black
div.classList.add('black');
// Добавляем к div стили
div.style.cssText = 'width: 250px; height: 110px';
// Добавляем в конец body тег div
document.body.append(div);
// Вставка HTML-кода в начало и в конец элемента
div.insertAdjacentHTML("afterbegin", '<p>afterbegin - В начало элемента</p>');
div.insertAdjacentHTML("beforeend", '<p>beforeend - В конец элемента</p>');
// Вставка HTML-кода после и перед элементом
div.insertAdjacentHTML("afterend", '<p>afterend - После элемента</p>');
div.insertAdjacentHTML("beforebegin", '<p>beforebegin - Перед элементом</p>');
Результат в Браузере
Результат в консоли
<p>beforebegin - Перед элементом</p>
<div class="black" style="width: 250px; height: 110px;">
<p>afterbegin - В начало элемента</p>
<p>beforeend - В конец элемента</p>
</div>
<p>afterend - После элемента</p>
Вот так при помощи метода insertAdjacentHTML происходит вставка HTML-кода в любое место страницы относительно опорного элемента.
