insertAdjacentHTML մեթոդ

insertAdjacentHTML մեթոդը թույլ է տալիս տեղադրել HTML կոդի տող էջի ցանկացած տեղում: Կոդը տեղադրվում է հղումային տարրի նկատմամբ: Կարելի է տեղադրել հղումային տարրից առաջ (տեղադրման եղանակ 'beforeBegin'), դրանից հետո (տեղադրման եղանակ 'afterEnd'), ինչպես նաև հղումային տարրի սկզբում (տեղադրման եղանակ 'afterBegin') կամ վերջում (տեղադրման եղանակ 'beforeEnd'):

Շարահյուսություն

հղումային տարր.insertAdjacentHTML(տեղադրման եղանակ, տեղադրման կոդ);

Օրինակ . beforeBegin եղանակ

Ենթադրենք հղումային տարրը #target տարրն է: Դրանից առաջ տեղադրենք նոր պարբերություն.

<div id="target">
	<p>տարր</p>
</div>

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

Կոդի կատարման արդյունք.

<p>!</p>
<div id="target">
	<p>տարր</p>
</div>

Օրինակ . afterEnd եղանակ

Այժմ տեղադրենք նոր պարբերություն հղումային տարրից հետո.

<div id="target">
	<p>տարր</p>
</div>

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

Կոդի կատարման արդյունք.

<div id="target">
	<p>տարր</p>
</div>
<p>!</p>

Օրինակ . afterBegin եղանակ

Տեղադրենք նոր պարբերություն հղումային տարրի սկզբում.

<div id="target">
	<p>տարր</p>
</div>

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

Կոդի կատարման արդյունք.

<div id="target">
	<p>!</p>
	<p>տարր</p>
</div>

Օրինակ . beforeEnd եղանակ

Տեղադրենք նոր պարբերություն հղումային տարրի վերջում.

<div id="target">
	<p>տարր</p>
</div>

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

Կոդի կատարման արդյունք.

<div id="target">
	<p>տարր</p>
	<p>!</p>
</div>

Տես նաև

insertAdjacentText մեթոդը,
որը տեղադրում է տեքստ նշված տեղում
insertAdjacentElement մեթոդը,
որը տեղադրում է տարր նշված տեղում
prepend մեթոդը,
որը տեղադրում է տարրեր սկզբում
append մեթոդը,
որը տեղադրում է տարրեր վերջում
appendChild մեթոդը,
որը տեղադրում է տարրեր ծնողի վերջում
insertBefore մեթոդը,
որը տեղադրում է տարրեր տարրից առաջ