insertAdjacentHTML әдісі

insertAdjacentHTML әдісі HTML коды жолын беттің кез келген жеріне енгізуге мүмкіндік береді. Код негізгі элементке қатысты енгізіледі. Негізгі элементтің алдына енгізу жасауға болады (енгізу тәсілі 'beforeBegin'), оның соңына (енгізу тәсілі 'afterEnd'), сондай-ақ негізгі элементтің басына (енгізу тәсілі 'afterBegin') немесе соңына (енгізу тәсілі 'beforeEnd') енгізуге болады.

Синтаксис

негізгі элемент.insertAdjacentHTML(енгізу тәсілі, енгізуге арналған код);

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

Негізгі элемент #target элементі болсын. Оның алдына жаңа абзац енгізейік:

<div id="target">
	<p>elem</p>
</div>

let target = document.querySelector('#target');
target.insertAdjacentHTML('beforeBegin', '<p>!</p>');

Кодты орындау нәтижесі:

<p>!</p>
<div id="target">
	<p>elem</p>
</div>

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

Енді негізгі элементтен кейін жаңа абзац енгізейік:

<div id="target">
	<p>elem</p>
</div>

let target = document.querySelector('#target');
target.insertAdjacentHTML('afterEnd', '<p>!</p>');

Кодты орындау нәтижесі:

<div id="target">
	<p>elem</p>
</div>
<p>!</p>

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

Негізгі элементтің басына жаңа абзац енгізейік:

<div id="target">
	<p>elem</p>
</div>

let target = document.querySelector('#target');
target.insertAdjacentHTML('afterBegin', '<p>!</p>');

Кодты орындау нәтижесі:

<div id="target">
	<p>!</p>
	<p>elem</p>
</div>

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

Негізгі элементтің соңына жаңа абзац енгізейік:

<div id="target">
	<p>elem</p>
</div>

let target = document.querySelector('#target');
target.insertAdjacentHTML('beforeEnd', '<p>!</p>');

Кодты орындау нәтижесі:

<div id="target">
	<p>elem</p>
	<p>!</p>
</div>

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

insertAdjacentText әдісі,
берілген жерге мәтінді енгізеді
insertAdjacentElement әдісі,
берілген жерге элементті енгізеді
prepend әдісі,
элементтерді басына енгізеді
append әдісі,
элементтерді соңына енгізеді
appendChild әдісі,
элементтерді ата-ананың соңына енгізеді
insertBefore әдісі,
элементтерді элементтің алдына енгізеді