Метод 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);
};

Результат:

Қараш