Meetod insertAdjacentHTML

Meetod insertAdjacentHTML võimaldab sisestada HTML-koodi stringi lehe suvalisse kohta. Kood sisestatakse suhtes tugielemendiga. Saab teha sisestuse enne tugielementi (sisestusviis 'beforeBegin'), pärast seda (sisestusviis 'afterEnd'), samuti algusesse (sisestusviis 'afterBegin') või lõppu (sisestusviis 'beforeEnd') tugielemendist.

Süntaks

tugielement.insertAdjacentHTML(sisestusviis, sisestatav kood);

Näide . Viis beforeBegin

Olgu tugielemendiks element #target. Sisestame selle ette uue lõigu:

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

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

Koodi täitmise tulemus:

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

Näide . Viis afterEnd

Nüüd sisestame uue lõigu pärast tugielementi:

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

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

Koodi täitmise tulemus:

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

Näide . Viis afterBegin

Sisestame uue lõigu tugielemendi algusesse:

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

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

Koodi täitmise tulemus:

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

Näide . Viis beforeEnd

Sisestame uue lõigu tugielemendi lõppu:

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

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

Koodi täitmise tulemus:

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

Vaata ka

meetod insertAdjacentText,
mis sisestab teksti etteantud kohta
meetod insertAdjacentElement,
mis sisestab elemendi etteantud kohta
meetod prepend,
mis sisestab elemendid algusesse
meetod append,
mis sisestab elemendid lõppu
meetod appendChild,
mis sisestab elemendid vanema lõppu
meetod insertBefore,
mis sisestab elemendid enne elementi