Mbinu ya insertAdjacentElement
Mbinu insertAdjacentElement inaruhusu
kuingiza kipengele popote kwenye ukurasa.
Hutumiwa mara nyingi baada ya kuunda kipengele
kwa kutumia createElement.
Kodi huingizwa jamaa na kipengele cha msingi.
Inawezekana kuingiza kabla ya
kipengele cha msingi (njia ya kuingiza beforeBegin),
baada yake (njia ya kuingiza afterEnd),
au mwanzoni (njia ya kuingiza afterBegin)
au mwisho (njia ya kuingiza beforeEnd)
cha kipengele cha msingi.
Kisarufu
kipengele cha msingi.insertAdjacentElement(njia ya kuingiza, kodi ya kuingiza);
Mfano . Njia beforeBegin
Acha kipengele cha msingi kiwe kipengele #target.
Wacha tuingize aya mpya kabla yake:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeBegin', p);
Matokeo ya utekelezaji wa kodi:
<p>!</p>
<div id="target">
<p>elem</p>
</div>
Mfano . Njia afterEnd
Sasa wacha tuingize aya mpya baada ya kipengele cha msingi:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterEnd', p);
Matokeo ya utekelezaji wa kodi:
<div id="target">
<p>elem</p>
</div>
<p>!</p>
Mfano . Njia afterBegin
Wacha tuingize aya mpya mwanzoni mwa kipengele cha msingi:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('afterBegin', p);
Matokeo ya utekelezaji wa kodi:
<div id="target">
<p>!</p>
<p>elem</p>
</div>
Mfano . Njia beforeEnd
Wacha tuingize aya mpya mwishoni mwa kipengele cha msingi:
<div id="target">
<p>elem</p>
</div>
let p = document.createElement('p');
p.textContent = '!';
let target = document.querySelector('#target');
target.insertAdjacentElement('beforeEnd', p);
Matokeo ya utekelezaji wa kodi:
<div id="target">
<p>elem</p>
<p>!</p>
</div>
Angalia pia
-
mbinu
insertAdjacentHTML,
ambayo huingiza vitagi mahali palipopangwa -
mbinu
insertAdjacentText,
ambayo huingiza maandishi mahali palipopangwa -
mbinu
prepend,
ambayo huingiza vipengele mwanzoni -
mbinu
append,
ambayo huingiza vipengele mwishoni -
mbinu
appendChild,
ambayo huingiza vipengele mwishoni wa mzazi -
mbinu
insertBefore,
ambayo huingiza vipengele kabla ya kipengele
