Метод 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,
който вмъква елементи преди елемент
