Mbinu ya createElement

Mbinu createElement inakuwezesha kuunda kipengele kipya, kwa kupitisha jina la kitambulizo kwenye kigezo. Baada ya kuunda, unaweza kufanya kazi na kipengele hicho kama kipengele cha kawaida, na pia unaweza kuongeza kwenye ukurasa kwa kutumia mbinu prepend, append, appendChild, insertBefore au insertAdjacentElement.

Ikiwa utaandika matokeo ya kazi ya createElement kwenye kutofautisha, basi kwenye kutofautisha hiyo kutakuwa na kipengele kama hicho, kana kwamba tumepata hicho kipengele kupitia querySelector au getElementById. Tofauti pekee - kipengele chetu hakitakuwa kimewekwa kwenye ukurasa. Lakini tunaweza kubadilisha innerHTML yake, sifa, kuweka wakaguzi wa matukio na mwishowe kukiweka kwenye ukurasa.

Kisarufu

javascriptdocument.createElement('jina la kitambulizo');

Mfano

Wacha tuunde aya, tuiweke maandishi na tuiweke kwenye ukurasa mwisho mwa kipande #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);

Matokeo ya utekelezaji wa kificho:

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

Mfano

Amepewa ul. Wacha tuweke ndani yake 9 vitambulizo li, huku maandishi yao yakawa namba za mpangilio:

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

Matokeo ya utekelezaji wa kificho:

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>

Mfano

Wacha tunapoweka vipelelezi tutaambatisha wakaguzi wa matukio kwao:

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

Результат:

Angalia pia