Bagaimanakah Saya Boleh Menyuntik Teks Tersuai Sebelum Elemen Menggunakan CSS atau JavaScript?

Mencipta Suntikan Teks dengan CSS

Apabila beralih daripada CSS asas kepada teknik yang lebih maju, adalah wajar untuk mencari cara untuk meningkatkan persembahan teks. Satu cabaran sedemikian melibatkan menyuntik teks tersuai sebelum elemen tertentu berdasarkan nama kelasnya.

Memasukkan Teks Menggunakan CSS

Dalam soalan anda, anda bertujuan untuk memaparkan "Tugas Joe: " sebelum elemen teks dengan kelas "OwnerJoe." Secara tradisinya, anda boleh memasukkan teks dalam elemen itu sendiri:

<span class="OwnerJoe">Joe's Task: reconcile all entries</span>

Walau bagaimanapun, kaedah ini menjadi berlebihan apabila menentukan kedua-dua kelas dan kandungan teks.

Untuk menangani keinginan anda, CSS menawarkan penyelesaian:

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

Peraturan ini mengarahkan penyemak imbas untuk menyuntik teks yang ditentukan ("Tugas Joe: ") sebelum sebarang elemen dengan kelas "OwnerJoe". Ambil perhatian bahawa ini memerlukan penyemak imbas yang mematuhi CSS2.

Pendekatan Alternatif: JavaScript

Walaupun CSS boleh mengendalikan tugas ini, JavaScript menyediakan pendekatan yang lebih mudah, terutamanya jika anda lebih suka suntikan teks dinamik. Menggunakan jQuery:

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

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyuntik Teks Tersuai Sebelum Elemen Menggunakan CSS atau JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!