Bagaimana untuk menambah kandungan pada bahagian menggunakan jQuery/JavaScript?-tutorial js-php.cn

Bagaimana untuk menambah kandungan pada bahagian menggunakan jQuery/JavaScript?

王林

Lepaskan： 2023-09-17 11:49:02

ke hadapan

945 orang telah melayarinya

如何使用 jQuery/JavaScript 在部分中添加内容？

Kami boleh menambah kandungan pada bahagian tapak web menggunakan kaedah "tambah" atau "prepend" jQuery. Ini boleh dilakukan dengan memilih elemen menggunakan kaedah "pemilih" jQuery dan kemudian menambah kandungan yang diperlukan menggunakan kaedah yang sesuai. Selain itu, kami boleh menambah kandungan pada bahagian menggunakan atribut 'innerHTML' JavaScript.

Terdapat banyak cara untuk menambah kandungan pada teg kepala secara pemrograman. Hari ini kita akan membincangkan 3 daripadanya -

Gunakan kaedah .append() jQuery -
Gunakan kaedah document.createElement() JavaScript -
Gunakan kaedah insertAdjacentHTML() JavaScript -

Gunakan 3 kaedah ini untuk mencapai tugas yang sama, iaitu menambah kandungan pada teg

Jadi, mari kita bincangkan kaedah ini satu persatu.

Kaedah 1: Gunakan kaedah .append() jQuery

Ini adalah satu pelapis mudah untuk menambahkan kandungan pada mana-mana teg dalam HTML (dalam kes kami, ia akan menjadi teg kepala) -

$("head").append("alert('hello');");

Salin selepas log masuk

Kaedah 2: Gunakan kaedah document.createElement() JavaScript

Menggunakan fungsi JavaScript createElement() dan kemudian fungsi appendChild(), kita boleh mencapai fungsi yang sama seperti ini -

var script = document.createElement("script");
script.innerHTML = "alert('hello');";
document.getElementsByTagName("head")[0].appendChild(script);

Salin selepas log masuk

Kaedah 3: Gunakan kaedah insertAdjacentHTML() JavaScript

Kaedah terakhir yang ingin kita bincangkan ialah kaedah insertAdjacentHTML() JavaScript -

document.head.insertAdjacentHTML("beforeend", "alert('hello');");

Salin selepas log masuk

Sekarang kita telah membincangkan semua kaedah ini secara berasingan, mari kita gunakannya dalam contoh yang berfungsi.

Contoh

Kod lengkap adalah seperti berikut -

<html>
<head>
   <title>Content in head section</title>
</head>
   <body>   
      <h1 style = "color: black;">Welcome to my website</h1>  
   <script src="https://code.jquery.com/jquery-3.6.0.min.js">
   </script>    
      <script>
         // Using jQuery's .append() method
         $("head").append("<link rel='stylesheet' href='styles.css'>");
         // Using JavaScript's document.createElement() method
         var meta = document.createElement("meta");
         meta.name = "description";
         meta.content = "This is my website";
         document.getElementsByTagName("head")[0].appendChild(meta);
      </script>
   </body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk menambah kandungan pada bahagian menggunakan jQuery/JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!