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 әдісі,
элементтерді элементтің алдына енгізеді

insertAdjacentElement әдісі

Синтаксис

Мысал . beforeBegin тәсілі

Мысал . afterEnd тәсілі

Мысал . afterBegin тәсілі

Мысал . beforeEnd тәсілі

Сондай-ақ қараңыз

Мысал . `beforeBegin` тәсілі

Мысал . `afterEnd` тәсілі

Мысал . `afterBegin` тәсілі

Мысал . `beforeEnd` тәсілі