Метод 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методи,
элементларни элемент олдига киритиш учун
