JavaScript-de elementleri döretmek we goýmak

Häzir biz JavaScript arkaly täze DOM elementlerini nädip döretmelidigini we soňra olary sahypa goşmalydygyny öwreneris. Bunuň üçin niýetlenen usul createElement. Bu usulyň parametri hökmünde döredilmeli tegiň ady berlmelidir.

Eger createElement usulynyň netijesini üýtgeýjide ýazsaňyz, şol üýtgeýjide ony querySelector arkaly alyp ýaly bir element bolary.

Iň tapawudy - bizifi elementimiz sahypa ýerleşdirilmez. Emma şeýlelik bilen biz onuň tekstini, atributlaryny üýtgedip, wakalar üçin işleýjileri belläp we ahyrsoňy ony sahypa ýerleşdirip bileris.

Täze elementi sahypa ýerleşdirmek üçin appendChild usuly ulanylýar. Bu usul bizifi elementimizi içine goýmak isleýän elementiň özüne ulanmaly. Usulyň parametri hökmünde bolsa öň createElement arkaly döredilen täze elementimizi bermelidir.

Amaly mysalda göreli. Gerek bizde diw we onuň içinde - birnäçe abzas bolsun:

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

Geliň bir abzas döret, oňa tekst belläp we sahypanyň ahyrynda #parent blogyna goýalyň:

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

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

parent.appendChild(p);

Kodyň ýerine ýetiriliş netijesi:

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>