Методи 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,
ки унсурҳоро пеш аз унсур ворид мекунад
