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 მეთოდი,
რომელიც ჩასვამს ელემენტებს ელემენტის წინ