Comment puis-je insérer dynamiquement du texte dans une page Web à l'aide de CSS ou de JavaScript ?

Insérer dynamiquement du texte avec CSS

Votre question porte sur l'utilisation de CSS pour insérer du texte dans une page Web. Bien que CSS soit principalement utilisé pour le style et le formatage, il offre des capacités limitées pour l'insertion de texte.

Pour obtenir le résultat souhaité, vous souhaitez que le texte avec la classe « OwnerJoe » apparaisse sous la forme « Joe's Task : », suivi par le texte lui-même. Heureusement, c'est possible avec le pseudo-élément :before en CSS.

Utiliser CSS :before

En utilisant le pseudo-élément :before, vous pouvez insérer du contenu avant l'élément auquel il est attaché. Dans votre cas, vous pouvez ajouter le CSS suivant :

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

Ce code demandera au navigateur d'afficher le texte "Joe's Task:" avant tout élément avec la classe "OwnerJoe."

Alternative : Utiliser JavaScript avec jQuery

Alors que CSS :before peut insérer texte, il peut ne pas être pris en charge dans les anciens navigateurs. Pour une compatibilité plus large, vous pouvez également utiliser JavaScript pour insérer le texte. Voici un exemple utilisant jQuery :

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

Ce code ajoutera un élément avec le texte « Joe's Task : » avant tout élément avec la classe « OwnerJoe ».

En fin de compte, le choix entre CSS et JavaScript dépend des exigences de prise en charge de votre navigateur et des besoins spécifiques du projet. CSS :before fournit une solution plus concise, tandis que JavaScript offre plus de flexibilité et de compatibilité entre navigateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!