createElement методу

createElement методу тегдин аталышын параметр катары берүү менен жаңы элемент түзүүгө мүмкүндүк берет. Түзүлгөндөн кийин элемент менен кадимки элемент сыяктуу иштөөгө болот, ошондой эле аны prepend, append, appendChild, insertBefore же insertAdjacentElement методдору менен баракка кошууга болот.

Эгерде createElement методунун натыйжасын өзгөрмөгө жазып койсок, анда бул өзгөрмөдө биз аны querySelector же getElementById аркылуу алган сыяктуу элемент болот. Жалгыз айырма - биздин элемент баракта жайгаштырылбайт. Ошондо биз анын innerHTML'ин, атрибуттарын өзгөртө алабыз, окуяларды көзөмөлдөөчүлөрдү байлап коё алабыз жана аягында аны баракка жайгаштыра алабыз.

Синтаксис

javascriptdocument.createElement('тегдин аталышы');

Мисал

Келгиле, абзац түзөлү, ага текст коёлу жана аны #parent блогунун аягына баракка жайгаштыралы:

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);

Кодду иштетүүнүн натыйжасы:

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

Мисал

ul берилген. Келгиле, анын ичине 9 li тегин жайгаштыралы, ошол эле учурда алардын текстин иреттик номер кылалы:

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);
}

Кодду иштетүүнүн натыйжасы:

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>

Мисал

Келгиле, элементтерди киргизгенде аларга окуяларды көзөмөлдөөчүлөрдү байлап көрөлү:

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);
};

Результат:

Дагы караңыз