Rumah >hujung hadapan web >tutorial js >Bagaimana untuk menambah kandungan pada bahagian menggunakan jQuery/JavaScript?

Bagaimana untuk menambah kandungan pada bahagian menggunakan jQuery/JavaScript?

王林ke hadapan: 2023-09-17 11:49:02979semak imbas

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

Kami boleh menambah kandungan pada bahagian 93f0f5c25f18dab9d176bd4f6de5d30e tapak web menggunakan kaedah "tambah" atau "prepend" jQuery. Ini boleh dilakukan dengan memilih elemen 93f0f5c25f18dab9d176bd4f6de5d30e menggunakan kaedah "pemilih" jQuery dan kemudian menambah kandungan yang diperlukan menggunakan kaedah yang sesuai. Selain itu, kami boleh menambah kandungan pada bahagian 93f0f5c25f18dab9d176bd4f6de5d30e 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 d24920cbaa5caf2d2dac816929b26725

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

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

Kaedah 3: Gunakan kaedah insertAdjacentHTML() JavaScript

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

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

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>

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!

JavaScript jquery html append innerHTML 选择器

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk menyemak sama ada tatasusunan ialah subset tatasusunan lain menggunakan JavaScript?Artikel seterusnya：Bagaimana untuk menyemak sama ada tatasusunan ialah subset tatasusunan lain menggunakan JavaScript?

Artikel berkaitan

Lihat lagi