Rumah > hujung hadapan web > tutorial js > Bagaimana untuk Memasukkan Teg `` Dengan Elegan ke Halaman HTML Menggunakan JavaScript?

Bagaimana untuk Memasukkan Teg `` Dengan Elegan ke Halaman HTML Menggunakan JavaScript?

DDD
Lepaskan: 2024-12-08 03:09:11
asal
649 orang telah melayarinya

How to Elegantly Insert a `` Tag into an HTML Page Using JavaScript?

Memasukkan Teg dengan JavaScript

Soalan:

Bagaimana anda boleh mencipta tag dan masukkan ke dalam halaman HTML menggunakan JavaScript? Adakah terdapat kaedah yang lebih elegan dan serasi merentas penyemak imbas daripada penyelesaian semasa yang menggunakan innerHTML?

Jawapan:

Pendekatan pilihan adalah untuk menambahkan elemen gaya terus ke daripada dokumen tersebut. Kaedah ini berfungsi secara konsisten merentas penyemak imbas utama, termasuk Chrome. Berikut ialah penyelesaian yang dipertingkatkan:

var css = 'h1 { background: red; }',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');

head.appendChild(style);

style.type = 'text/css';
if (style.styleSheet) {
    // This is required for IE8 and below.
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}
Salin selepas log masuk

Kaedah ini memberikan kelebihan berikut:

  • Ia lebih elegan dan ringkas.
  • Ia berfungsi dalam semua pelayar utama, termasuk Chrome.
  • Ia mengelakkan keperluan untuk tambahan
    elemen di hadapan teg gaya untuk menyelesaikan isu merentas penyemak imbas.

Atas ialah kandungan terperinci Bagaimana untuk Memasukkan Teg `` Dengan Elegan ke Halaman HTML Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan