Bagaimana untuk menggantikan elemen HTML dengan elemen lain menggunakan JavaScript?

Dalam tutorial ini, kita akan belajar untuk menggantikan elemen HTML dengan elemen lain menggunakan JavaScript.

Dalam sesetengah kes penggunaan, kita perlu menggantikan keseluruhan elemen HTML dengan elemen yang berbeza. Sebagai contoh, ia sangat penting dalam pengesahan borang. Katakan kita mendapat umur pengguna daripada borang, dan pengguna memasuki usia yang salah kita boleh memaparkan mesej pengesahan dengan menggantikan elemen HTML. Kes penggunaan lain di mana kita perlu menggantikan elemen HTML dengan elemen HTML lain ialah pemuatan kandungan dinamik, di mana kita perlu memaparkan kandungan halaman web berdasarkan syarat tertentu seperti lokasi, dsb.

Di sini kita akan mempelajari 3 cara untuk menggantikan elemen HTML pada halaman web.

Gunakan kaedah replaceWith()

Kaedah pertama menggunakan kaedah replaceWith(). Kita perlu melaksanakan kaedah replaceWith() dengan mengambil elemen sebelumnya sebagai rujukan dan menghantar elemen baharu sebagai rujukan. Kita boleh mencipta elemen baharu dalam format rentetan.

Tatabahasa

Pengguna boleh menggunakan kaedah Javascript replaceWith() untuk menggantikan satu elemen HTML dengan elemen HTML yang lain mengikut sintaks berikut.

oldElement.replaceWith(newElement);

Dalam sintaks di atas, oldElement ialah elemen yang boleh diganti dan newElement ialah elemen yang diganti.

Contoh

Dalam contoh di bawah, kami mempunyai elemen div dalam HTML yang mengandungi id "oldElement". Kami memanggil fungsi ReplaceElement() apabila butang diklik. Dalam fungsi replaceElement(), kami mencipta elemen "h2" baharu menggunakan kaedah createElement(). Selain itu, kami menggunakan atribut textContent untuk menambah kandungan pada elemen HTML yang baru dibuat. Selepas itu, kami menggantikan oldElement dengan newElement menggunakan kaedah replaceWith().

Dalam output, pengguna boleh mengklik butang dan melihat perubahan pada halaman web.

  
 Using the  replaceWith() method  to replace the HTML elements in JavaScript 
 
 This div is the old element. 
  Replace Element   

Gunakan atribut outerHTML

Atribut HTML luar mana-mana elemen membolehkan kami menggantikan keseluruhan elemen HTML dengan elemen HTML yang lain. Kita perlu menetapkan nilai elemen baharu kepada atribut outerHTML untuk menggantikan elemen HTML.

Tatabahasa

Pengguna boleh menggantikan satu elemen HTML dengan elemen HTML yang lain menggunakan atribut outerHTML mengikut sintaks berikut.

document.getElementById(id).outerHTML = newEle;

Contoh

Dalam contoh di bawah, kami telah mencipta elemen "

" yang mengandungi id "para" dan beberapa kandungan teks. Dalam fungsi replaceElement(), kami mencipta elemen HTML baharu dalam format rentetan dan memberikan nilainya kepada atribut outerHTML elemen "

".

Dalam output, pengguna harus mengklik butang untuk menggantikan elemen "

" dengan elemen HTML "

".

  
 Using the  outerHTML property  to replace the HTML elements in JavaScript 
 
 Welcome to the TutorialsPoint! 
  Replace Element   

Salin selepas log masuk

Contoh

Dalam contoh di bawah, kami telah mencipta menu pilihan dengan pilihan yang berbeza. Di sini kami akan menggantikan pilihan khusus menu pemilihan. Selain itu, kami mencipta dua medan input. Satu adalah untuk mendapatkan nombor indeks, dan satu lagi adalah untuk mendapatkan nilai pilihan baharu pengguna.

Dalam fungsi replaceOption(), kami mendapat nilai input baharu daripada pengguna. Selepas itu, kami mengakses pilihan menggunakan nilai indeks yang dimasukkan oleh pengguna dalam input. Seterusnya, kami menggantikan pilihan dengan nilai baharu menggunakan atribut outerHTML pilihan.

Dalam output, masukkan nilai indeks berasaskan sifar dalam medan input pertama, masukkan nilai pilihan baharu dalam medan input kedua, dan klik butang untuk menggantikan pilihan.

  
 Using the  outerHTML property  to replace the options in the select menu 
  Index:   
 
  New Value:   
 
   One   Two   Three   Four   Five   Six    Replace Option   

Gunakan kaedah replaceChild()

replaceChild() membenarkan pembangun menggantikan nod anak elemen HTML tertentu dengan elemen baharu. Di sini kita boleh menggantikan elemen anak pertama bagi elemen tertentu untuk menggantikan dirinya dengan elemen baharu.

Tatabahasa

Pengguna boleh menggunakan kaedah replaceChild() untuk menggantikan satu elemen HTML dengan elemen HTML yang lain mengikut sintaks berikut.

oldEle.replaceChild(HTMLele, oldEle.childNodes[0]);

Dalam sintaks di atas, kita perlu menghantar elemen baharu sebagai parameter pertama kaedah replaceChild() dan elemen lama sebagai parameter kedua.

Contoh

Dalam contoh di bawah, mula-mula kita mencipta elemen "h3" menggunakan kaedah createElement(). Selepas itu, kami menggunakan kaedah createTextNode() untuk mencipta kandungan teks. Selepas itu, kami menambahkan nod teks pada elemen HTML yang baru dibuat menggunakan kaedah appendChild().

Seterusnya, kami melaksanakan kaedah replaceChild() dengan merujuk elemen lama. Selain itu, kami lulus HTMLele sebagai parameter pertama (elemen yang baru dicipta) dan oldEle.childNodes[0] sebagai parameter kedua (elemen anak pertama bagi elemen lama, mewakili dirinya sendiri).

Dalam output, klik butang dan tonton perubahan pada halaman web.

  
 Using the  replaceChild() method  to replace the HTML elements in JavaScript 
 
 Welcome to the TutorialsPoint! 
  Replace Element   

Kami mempelajari tiga cara berbeza untuk menggantikan satu elemen HTML dengan elemen HTML yang lain menggunakan JavaScript. Dalam kaedah pertama, kami menggunakan kaedah replaceWith(), yang merupakan salah satu kaedah terbaik dan paling mudah. Dalam kaedah kedua, kami menggunakan atribut outerHTML; dalam kaedah ketiga, kami menggunakan kaedah replaceChild(), yang biasanya digunakan untuk menggantikan elemen anak.

Atas ialah kandungan terperinci Bagaimana untuk menggantikan elemen HTML dengan elemen lain menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!