insertAdjacentHTML მეთოდი

insertAdjacentHTML მეთოდი საშუალებას აძლევს ჩადოს HTML კოდის სტრიქონი გვერდის ნებისმიერ ადგილას. კოდი ჩასმულია საცნობარო ელემენტთან მიმართებაში. შესაძლებელია ჩასვათ საცნობარო ელემენტის წინ (ჩასმის მეთოდი 'beforeBegin'), მის შემდეგ (ჩასმის მეთოდი 'afterEnd'), ასევე საცნობარო ელემენტის დასაწყისში (ჩასმის მეთოდი 'afterBegin') ან ბოლოში (ჩასმის მეთოდი 'beforeEnd').

სინტაქსი

javascriptსაცნობარო ელემენტი.insertAdjacentHTML(ჩასმის მეთოდი, ჩასასმელი კოდი);

მაგალითი . beforeBegin მეთოდი

დავუშვათ საცნობარო ელემენტი არის #target ელემენტი. ჩავსვათ მის წინ ახალი აბზაცი:

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

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

კოდის შესრულების შედეგი:

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

მაგალითი . afterEnd მეთოდი

ახლა კი ჩავსვათ ახალი აბზაცი საცნობარო ელემენტის შემდეგ:

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

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

კოდის შესრულების შედეგი:

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

მაგალითი . afterBegin მეთოდი

ჩავსვათ ახალი აბზაცი საცნობარო ელემენტის დასაწყისში:

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

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

კოდის შესრულების შედეგი:

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

მაგალითი . beforeEnd მეთოდი

ჩავსვათ ახალი აბზაცი საცნობარო ელემენტის ბოლოში:

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

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

კოდის შესრულების შედეგი:

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

იხილეთ აგრეთვე