JavaScript-də elementlərin yaradılması və əlavə edilməsi

İndi biz JavaScript vasitəsilə yeni DOM elementləri necə yaratmağı və sonra onları səhifəyə əlavə etməyi öyrənəcəyik. Bunun üçün createElement metodu nəzərdə tutulub. Bu metodun parametri kimi yaradılmalı olan teqin adı ötürülməlidir.

Əgər createElement-in işinin nəticəsini dəyişənə yazsaq, bu dəyişəndə elə bir element olacaq, sanki onu querySelector ilə almışıq.

Yeganə fərq - bizim element səhifədə yerləşdirilməyəcək. Amma biz onun mətnini, atributlarını dəyişə, hadisə işləyiciləri əlavə edə və nəhayət onu səhifədə yerləşdirə bilərik.

Yeni elementi səhifədə yerləşdirmək üçün appendChild metodu tətbiq edilir. Bu metod elementə tətbiq edilməlidir, içinə biz elementimizi yerləşdirmək istəyirik. Parametr kimi isə əvvəllər createElement ilə yaratdığımız yeni elementi ötürməliyik.

Praktiki nümunəyə baxaq. Tutaq ki, bizim bir div və onun içində - bir neçə abzas var:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

Gəlin bir abzas yaradaq, ona mətn təyin edək və səhifədə #parent blokunun sonuna yerləşdirək:

javascriptlet parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.appendChild(p);

Kodun icrasının nəticəsi:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>!</p>
</div>

html<ol id="elem"></ol>

html<ol id="elem"></ol>
<button id="button">click me</button>