Есть желание присоединиться к интересным IT проектам? Смотри открытые вакансии.

JavaScript метод Element.insertAdjacentText()

JavaScript Element

Определение и применение

JavaScript метод insertAdjacentText() объекта Element позволяет вставить указанный текстовый узел в заданную позицию относительно элемента на котором он вызывается.

Схематичное отображение работы метода insertAdjacentText() отображено на следующем изображении:

Схематичное отображение работы метода insertAdjacentText() объекта Element

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

МетодChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
insertAdjacentText()Да48.0ДаДаДаДа

JavaScript синтаксис:

targetElement.insertAdjacentText(position, text);

position - String
text - String

Версия JavaScript

DOM Parsing and Serialization

Значения параметров

ПараметрОписание
positionСтроковое значение, представляющее позицию относительно целевого элемента.
Возможные значения:
  • "beforebegin" - Текстовое содержимое будет вставлено перед целевым элементом.
  • "afterbegin" - Текстовое содержимое будет вставлено внутри целевого элемента перед его первым дочерним элементом.
  • "beforeend" - Текстовое содержимое будет вставлено внутри целевого элемента после его последнего дочернего элемента.
  • "afterend" - Текстовое содержимое будет вставлено после целевого элемента.
Позиции "beforebegin" и "afterend" работают только в том случае, если узел находится в дереве и имеет родительский элемент. Является обязательным параметром.
textТекстовое содержимое, которое будет вставлено в дерево DOM. Обязательный параметр.

Исключения

Тип исключенияОписание
SyntaxErrorВозникает в том случае, если указанная позиция не является возможным значением.

Пример использования

<!DOCTYPE html>
<html>
	<head>
		<title>Использование метода insertAdjacentText()</title>
	</head>
	<body>
		<button onclick = "insertAfterBegin()">Insert with afterbegin position</button> <!-- добавляем атрибут событий onclick -->
		<button onclick = "insertBeforeEnd()">Insert with beforeend position</button> <!-- добавляем атрибут событий onclick -->
		<input  type = "text"  placeholder = "Значение для вставки"  style = "margin:50px 0">
		<div  style = "border:1px solid orange">
		        <p>Параграф</p>
		</div>
		<script>
	const div = document.querySelector("div"), // выбираем первый элемент <ul> в документе
	      inp = document.querySelector("input"); // выбираем первый элемент <input> в документе
  
	function insertAfterBegin() {
	  div.insertAdjacentText("afterbegin", inp.value); // текстовое содержимое будет вставлено внутри целевого элемента перед его первым дочерним элементом
	  inp.value = ""; // устанавливаем значение элементу <input>
	}

	function insertBeforeEnd() {
	  div.insertAdjacentText("beforeend", inp.value); // текстовое содержимое будет вставлено внутри целевого элемента после его последнего дочернего элемента
	  inp.value = ""; // устанавливаем значение элементу <input>
	}
		</script>
	</body>
</html>

В этом примере с использованием атрибута событий onclick при нажатии на определенную кнопку (HTML элемент <button>) мы вызываем функцию, которая с помощью метода insertAdjacentText() вставляет текстовое содержимое (значение элемента <input>) внутрь элемента <div> перед его первым дочерним элементом, или после его последнего дочернего элемента.

Обратите внимание, что после каждой вставки мы очищаем значение элемента <input>.

Результат нашего примера:

Пример использования метода insertAdjacentText()
Пример использования метода insertAdjacentText()
JavaScript Element
×

Кажется, вы используете блокировщик рекламы :(

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

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.