[HTML/CSS] Créer des éléments "pré-fabriqués"

electroking Messages postés 276 Statut Membre -  
electroking Messages postés 276 Statut Membre -
Bonjour à tous,

Je souhaite savoir comment je pourrai faire pour créer des éléments avec un contenu "automatique" :

Autrement dit, en insérant cette ligne : 

<div class="monObject"></div>


Je souhaiterai que la page l'interprète comme si elle contenait des balises HTML, comme par exemple : 

<div class="monObject">
    <span>Un texte</span>
</div>


L'objectif étant de pouvoir utiliser un grand nombre de balises de classes monObjet sans avoir à réécrire son contenu à chaque fois.

J'avais cherché du coté de la propriété "content" en css qui permet d'ajouter à un ensemble de balises du contenu en fonction d'un selecteur, ex : 

<div class="monObject"></div>


.monObject::after { content: 'Quelques mots'; }


Qui donne ce résultat : 

Quelques mots


Malheureusement, cette propriétés css ne prend pas en compte les balises HTML d'après ce que j'ai compris. Et si je remplaçai par exemple "Quelques mots" dans l'exemple ci-dessus par "<span>Un texte</span>" j'obtiendrai ceci : 

<span>Un texte</span>


Auriez vous une solution qui me permette de réaliser ceci ?

Merci d'avance pour votre/vos réponse-s

--
Cordialement,
Faure Lucas.

3 réponses

  1.
    jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
     
    Bonjour,
    Tu peux toujours faire ça en javascript (et même plus simple... en jquery).

    Par exemple (en jquery) via la méthode append
    https://api.jquery.com/append/ 

    $(".monObject").append("<span>Un texte</span>");

    0
  2. electroking Messages postés 276 Statut Membre 6
     
    Le problème c'est que Javascript nécéssite un certain temps de traitement, et je préfèrerai de l'instantané ...
    0
  3. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
     
    Alors peut-être en utilisant les caractères unicode 
    nav a:hover:after {
    content: "\2193";
}

    Après.. voir si tu peux faire une séquence de caractères unicode qui représenteraient ton span

    0
    1. electroking Messages postés 276 Statut Membre 6
       
      Je te remercie mais ces caractères unicodes sont affichés en texte brut non ?

      Je viens de tester par exemple : 

      div::after { content: '\003Cspan\003E'; }


      et cela affiche : 

      <span>
      0
    2. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
       
      Je n'ai pas testé. Mais il y' a des chances.
      perso... je ne me serais jamais posé ta question.... je l'aurais directement fais en JS.
      Et si le code js est bien écrit ... ça sera aussi rapide que du css......
      0
    3. electroking Messages postés 276 Statut Membre 6
       
      En fait le truc, c'est que je veux pouvoir faire ça sur un grande quantité de div (un nombre à 4 chiffres ou plus).
      J'ai expérimenté les animations à la fois en js et en css et j'ai remarqué que le css avait un "temps d'exécution" - si je peut appeler ça comme ça - beaucoup plus court quand il s'agit de manipuler une grande quantité d'éléments ...
      0
    4. jordane45 Messages postés 30427 Date d'inscription   Statut Modérateur Dernière intervention   4 832
       
      Tu ne peux pas tout faire en css.....
      Et pour ta question.. je n'ai pas la solution.

      (je déplace ta question dans le forum CSS .... dès fois que quelqu'un d'autre ait une idée... )
      0
    5. electroking Messages postés 276 Statut Membre 6
       
      Je cherche pas forcément en CSS mais je cherche le moyen le plus rapide d'automatiser ça en fait.
      Peut-être que mes codes JS ne sont pas très bien optimisés mais il me semblait que sur la manipulation de grosse quantité de données, ça ramait un peu et ça mettait du temps.
      0