Bagaimana untuk menggantikan elemen HTML dengan elemen lain menggunakan JavaScript?-tutorial js-php.cn

如何使用 JavaScript 将 HTML 元素替换为另一个元素？

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

Salin selepas log masuk

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.

<html>
<body>
   <h3> Using the <i> replaceWith() method </i> to replace the HTML elements in JavaScript </h3>
   <div id = "oldElement"> This div is the old element. </div>
   <button onclick = "replaceElement()"> Replace Element </button>
   <script>
      function replaceElement() {
         var newElement = document.createElement('h2');
         newElement.textContent = 'This element is the new element.';
         var oldElement = document.getElementById('oldElement');
         oldElement.replaceWith(newElement);
     }
   </script>
</html>

Salin selepas log masuk

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;

Salin selepas log masuk

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 "

<html>
<body>
   <h3> Using the <i> outerHTML property </i> to replace the HTML elements in JavaScript </h3>
   <p id = "para"> Welcome to the TutorialsPoint! </p>
   <button onclick = "replaceElement()"> Replace Element </button>
   <script>
      function replaceElement() {
         let newEle = '<h2> You clicked the button to replace the element. <h2>';
         document.getElementById('para').outerHTML = newEle;
      }
   </script>
</html>

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.

<html>
<body>
   <h3> Using the <i> outerHTML property </i> to replace the options in the select menu </h3>
   <label for = "indexInput"> Index: </label>
   <input type = "number" id = "indexInput">  <br>  <br>
   <label for = "valueInput"> New Value: </label>
   <input type = "text" id = "valueInput">   <br>  <br>
   <select id = "demo">
      <option value = "1"> One </option>
      <option value = "2"> Two </option>
      <option value = "3" selected> Three </option>
      <option value = "4"> Four </option>
      <option value = "5"> Five </option>
      <option value = "6"> Six </option>
   </select>
   <button onclick = "replaceOption()"> Replace Option </button>
   <script>
      function replaceOption() {
          // get user input
          var index = parseInt(document.getElementById('indexInput').value);
          var newValue = document.getElementById('valueInput').value;
          var list = document.getElementById('demo');
          // get the option to replace
          var option = list.options[index];
          // replace the option
          option.outerHTML = '<option value="' + newValue + '">' + newValue + '</option>';
      }
   </script>
</html>

Salin selepas log masuk

Gunakan kaedah replaceChild()

Kaedah

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

Salin selepas log masuk

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.

<html>
<body>
   <h3> Using the <i> replaceChild() method </i> to replace the HTML elements in JavaScript </h3>
   <p id = "para"> Welcome to the TutorialsPoint! </p>
   <button onclick = "replaceElement()"> Replace Element </button>
   <script>
      function replaceElement() {
         // create a new element
         var HTMLele = document.createElement("h3");
         // create a new text node
         var txt = document.createTextNode("This is a content of new element!");
         // use appendChild() to add a text node to the element
         HTMLele.appendChild(txt);
         var oldEle = document.getElementById("para");
         // using replaceChild() to replace the old element with a new element
         oldEle.replaceChild(HTMLele, oldEle.childNodes[0]);
       }
   </script>
</html>

Salin selepas log masuk

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!