Rumah > hujung hadapan web > tutorial js > Native js melaksanakan kaedah append().

Native js melaksanakan kaedah append().

PHPz
Lepaskan: 2024-02-18 14:37:20
asal
552 orang telah melayarinya

Native js melaksanakan kaedah append().

Untuk melaksanakan kaedah append() dalam js asli, contoh kod khusus diperlukan

Apabila menulis kod JavaScript, selalunya perlu menambah kandungan baharu pada elemen tertentu dalam halaman web. Operasi biasa adalah untuk menetapkan kandungan HTML elemen melalui atribut innerHTML. Walau bagaimanapun, menggunakan atribut innerHTML kadangkala mengakibatkan kehilangan pendengar acara, gaya, dsb. di dalam elemen. Untuk melaksanakan fungsi menambah kandungan dengan lebih baik, kami boleh melaksanakan kaedah append() sendiri. Kaedah

append() boleh menambah kandungan baharu pada penghujung elemen yang ditentukan, iaitu, menambah rentetan kod HTML yang diberikan ke bahagian dalam elemen. Berikut ialah sekeping kod yang menggunakan JavaScript asli untuk melaksanakan kaedah append():

function append(element, html) {
  var div = document.createElement('div');
  div.innerHTML = html;
  
  while (div.children.length > 0) {
    element.appendChild(div.children[0]);
  }
}
Salin selepas log masuk

Dalam kod di atas, kami mentakrifkan fungsi bernama append(), yang menerima dua parameter: elemen mewakili elemen sasaran untuk menambah kandungan, html Mewakili rentetan kod HTML yang akan ditambah.

Mula-mula, kami mencipta elemen div, dan kemudian menetapkan rentetan kod HTML untuk ditambahkan pada atribut innerHTML elemen div. Dengan cara ini, kami menghuraikan rentetan kod HTML ke dalam elemen DOM.

Seterusnya, kami menggunakan gelung sementara untuk melintasi nod anak elemen div dan menambah nod anak pada elemen sasaran satu demi satu. Semasa lelaran, kami menggunakan kaedah appendChild() untuk menambah nod anak pada hujung dalaman elemen yang ditentukan. Selepas gelung tamat, semua nod anak unsur div akan ditambahkan pada elemen sasaran.

Apabila menggunakan kaedah append() tersuai ini, kami hanya perlu memanggilnya dengan menghantar elemen sasaran dan rentetan kod HTML untuk ditambahkan, dan kami boleh melaksanakan fungsi menambahkan kandungan pada elemen yang ditentukan tanpa perlu risau tentang peristiwa dalaman dan Hilang gaya.

Berikut ialah contoh menggunakan kaedah append() tersuai. Katakan kita mempunyai elemen dengan id "myDiv" dan kita ingin menambahkan tajuk h1 dan perenggan padanya:

var myDiv = document.getElementById('myDiv');
var html = '<h1>这是一个标题</h1><p>这是一个段落</p>';

append(myDiv, html);
Salin selepas log masuk

Kod di atas akan ditambah <h1>这是一个标题</h1> <p>这是一个段落</p>. Masuk ke dalam elemen dengan id "myDiv".

Menggunakan JavaScript asli untuk melaksanakan kaedah append(), anda boleh menambah kandungan pada elemen yang ditentukan dengan lebih fleksibel sambil mengekalkan pendengar dan gaya acara di dalam elemen. Melalui kaedah tersuai, kami boleh mencapai operasi DOM yang lebih terkawal, cekap dan selamat.

Atas ialah kandungan terperinci Native js melaksanakan kaedah append().. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan