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

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 id="这是一个标题">这是一个标题</h1><p>这是一个段落</p>';

append(myDiv, html);

Kod di atas akan ditambah <h1 id="这是一个标题">这是一个标题</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!