Bagaimanakah Saya Boleh Memasukkan Teks Secara Dinamik ke Halaman Web Menggunakan CSS atau JavaScript?

Memasukkan Teks Secara Dinamik dengan CSS

Soalan anda berkisar tentang menggunakan CSS untuk memasukkan teks ke dalam halaman web. Walaupun CSS digunakan terutamanya untuk penggayaan dan pemformatan, ia menawarkan keupayaan terhad untuk memasukkan teks.

Untuk mencapai hasil yang diingini, anda mahu teks dengan kelas "OwnerJoe" muncul sebagai "Tugas Joe:," diikuti dengan teks sebenar. Nasib baik, ia boleh dilakukan dengan elemen pseudo :before dalam CSS.

Menggunakan CSS :before

Dengan menggunakan elemen pseudo :before, anda boleh masukkan kandungan sebelum elemen ia dilampirkan. Dalam kes anda, anda boleh menambah CSS berikut:

.OwnerJoe:before {
  content: "Joe's Task: ";
}

Kod ini akan mengarahkan penyemak imbas untuk memaparkan teks "Joe's Task: " sebelum sebarang elemen dengan kelas "OwnerJoe."

Alternatif: Menggunakan JavaScript dengan jQuery

Semasa CSS :sebelum boleh memasukkan teks, ia mungkin tidak disokong dalam pelayar lama. Untuk keserasian yang lebih luas, anda boleh menggunakan JavaScript untuk memasukkan teks secara alternatif. Berikut ialah contoh menggunakan jQuery:

$('.OwnerJoe').each(function() {
  $(this).before($('<span>').text("Joe's Task: "));
});

Kod ini akan menambah elemen dengan teks "Joe's Task: " sebelum sebarang elemen dengan kelas "OwnerJoe."

Akhirnya, pilihan antara CSS dan JavaScript bergantung pada keperluan sokongan penyemak imbas anda dan keperluan projek khusus. CSS :sebelum menyediakan penyelesaian yang lebih ringkas, manakala JavaScript menawarkan lebih fleksibiliti dan keserasian merentas pelayar.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memasukkan Teks Secara Dinamik ke Halaman Web Menggunakan CSS atau JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!