createElement metodi

createElement metodi, tag adyny parametr hökmünde geçirip täze element döretmäge mümkinçilik berýär. Döredilenden soň element bilen adaty element ýaly işlemek mümkin, şeýle hem ony sahypa üstüne prepend, append, appendChild, insertBefore ýa-da insertAdjacentElement metodlary bilen goşup bolýar.

Eger createElement metodynyň netijesini üýtgeýjide ýazsak, onda şol üýtgeýjide element bolup, goý biz ony querySelector ýa-da getElementById arkaýyly alypdyk. Diňe bir tapawut - biziň elementimiz sahypa üstünde ýerleşdirilen bolmaz. Emma biz onuň innerHTML-ini üýtgedip, atributlaryny düzedip, wakalar üçin işleýjileri bellep, ahyrynda ony sahypa üstünde ýerleşdirip bileris.

Sintaksis

javascriptdocument.createElement('tag ady');

Mysal

Geliň, abzas döredeliň, oňa tekst belleliň we sahypa üstünde #parent blogunyň ahyryna ýerleşdireliň:

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

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

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

parent.appendChild(p);

Kody ýerine ýetirmegiň netijesi:

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

Mysal

ul berlipdir. Geliň, onuň içine 9 sany li tagyny ýerleşdireliň, olaryň tekstini bolsa tertip belgileri edeliň:

html<ul id="parent"></ul>

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

for (let i = 1; i <= 9; i++) {
  let li = document.createElement('li');
  li.textContent = i;
  parent.appendChild(li);
}

Kody ýerine ýetirmegiň netijesi:

html<ul id="parent">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

Mysal

Geliň, elementleri goşýan wagtymyzda olara waka işleýjilerini birikdireliň:

html<ul id="parent"></ul>

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

for (let i = 1; i <= 9; i++) {
  let li = document.createElement('li');
  li.textContent = i;
  
  li.addEventListener('click', function() {
    alert(this.textContent);
  });
  
  parent.appendChild(li);
};

Результат:

Şeýle-de görüň