Методот insertAdjacentElement
Методот insertAdjacentElement овозможува
вметнување на елемент на било кое место на страницата.
Најчесто се користи после креирање на елемент
со помош на createElement.
Кодот се вметнува во однос на референтниот
елемент. Може да се направи вметнување пред
референтниот елемент (начин на вметнување beforeBegin),
после него (начин на вметнување afterEnd),
како и на почеток (начин на вметнување afterBegin)
или на крај (начин на вметнување beforeEnd)
на референтниот елемент.
Синтакса
референтен елемент.insertAdjacentElement(начин на вметнување, код за вметнување);
Пример . Начин beforeBegin
Нека референтниот елемент е елементот #target.
Да вметнеме нов пасус пред него:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
Резултат од извршување на кодот:
<p>!</p>
<div id="target">
<p>elem</p>
</div>
Пример . Начин afterEnd
А сега да вметнеме нов пасус после референтниот елемент:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
Резултат од извршување на кодот:
<div id="target">
<p>elem</p>
</div>
<p>!</p>
Пример . Начин afterBegin
Да вметнеме нов пасус на почетокот на референтниот елемент:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);
Резултат од извршување на кодот:
<div id="target">
<p>!</p>
<p>elem</p>
</div>
Пример . Начин beforeEnd
Да вметнеме нов пасус на крајот на референтниот елемент:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
Резултат од извршување на кодот:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
Погледнете ги исто така
-
методот
insertAdjacentHTML,
кој вметнува тагови на зададеното место -
методот
insertAdjacentText,
кој вметнува текст на зададеното место -
методот
prepend,
кој вметнува елементи на почетокот -
методот
append,
кој вметнува елементи на крајот -
методот
appendChild,
кој вметнува елементи на крајот на родителот -
методот
insertBefore,
кој вметнува елементи пред елементот
