«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript



Игра «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих



Если Вы научились манипулировать положением элементов на странице (см. заметки "Действия с элементами - ..."), то дальше нужно знать, как добавить текст или 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-кода в любое место страницы относительно опорного элемента.



Читайте также...



Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 3

Тематические публикации
Популярные заметки
Последние заметки