insertAdjacentHTML

insertAdjacentHTML


insertAdjacentHTML - это метод, который позволяет вставить HTML-код или разметку в определенное место внутри элемента, используя специальные значки для указания положения размещения.

Синтаксис `insertAdjacentHTML` выглядит следующим образом:

```javascript

element.insertAdjacentHTML(position, text);

```

где:

- element - элемент, к которому будет применяться метод `insertAdjacentHTML`.

- position - строка, определяющая положение размещения нового HTML-кода относительно выбранного элемента. Возможные значения для `position`:

 - 'beforebegin' - размещает HTML-код непосредственно перед началом элемента.

 - 'afterbegin'` - размещает HTML-код внутри элемента в самом начале.

 - 'beforeend' - размещает HTML-код внутри элемента в конце.

 - 'afterend' - размещает HTML-код непосредственно после выбранного элемента.

- text - HTML-код или разметка, которую вы хотите вставить.


Например, у нас есть следующий HTML-элемент:

<div id="myElement">Некоторый текст</div>

И мы хотим вставить разметку `<p>Вставленный элемент</p>` внутри этого элемента в самом начале. Мы можем использовать `insertAdjacentHTML` следующим образом:

```javascript

const element = document.getElementById("myElement");

element.insertAdjacentHTML("afterbegin", "<p>Вставленный элемент</p>");

```

После выполнения кода мы получим следующую разметку:

```html

<div id="myElement">

 <p>Вставленный элемент</p>

 Некоторый текст

</div>

```

Метод `insertAdjacentHTML` очень удобен, когда вам нужно динамически вставить HTML или разметку в определенное место внутри элемента без необходимости изменения всей разметки этого элемента. Он позволяет более точно контролировать место вставки и делает манипуляцию HTML проще и эффективнее.

Report Page