Kaedah createElement

Kaedah createElement membolehkan anda mencipta elemen baharu dengan menyampaikan nama tag dalam parameter. Selepas penciptaan, elemen boleh diuruskan seperti elemen biasa, dan ia juga boleh ditambahkan ke halaman menggunakan kaedah prepend, append, appendChild, insertBefore atau insertAdjacentElement.

Jika hasil kerja createElement disimpan ke dalam pembolehubah, maka pembolehubah tersebut akan mengandungi elemen yang sama seolah-olah kita mendapatkannya melalui querySelector atau getElementById. Satu-satunya perbezaan - elemen kita tidak akan ditempatkan di halaman. Selain itu, kita boleh menukar innerHTMLnya, atribut, menambahkan pengendali acara dan akhirnya menempatkannya di halaman.

Sintaks

javascriptdocument.createElement('nama tag');

Contoh

Mari kita cipta perenggan, tetapkan teks untuknya dan letakkan di halaman di akhir blok #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);

Keputusan pelaksanaan kod:

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

Contoh

Diberi ul. Mari letakkan 9 tag li di dalamnya, sambil menjadikan nombor urutan sebagai teks mereka:

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

Keputusan pelaksanaan kod:

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>

Contoh

Mari semasa memasukkan elemen, kita akan mengaitkan pengendali acara kepada mereka:

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

Результат:

Lihat juga