Émuler outerhtml

Soyez le premier à donner votre avis sur cette source.

Snippet vu 4 977 fois - Téléchargée 17 fois

Contenu du snippet

Ceci est un code d'à peine 0.39KO (compressé) permettant d'émuler la propriété outerHTML.

Contrairement aux codes habituels de ce genre, le outerHTML n'est pas généré avec la liste d'attributs mais simplement en ajoutant l'élément dans un autre élément et en récupérant le code HTML du contenu.

Mise à jour : On peut maintenant modifier, sans aucune restriction, le outerHTML.

Comme la source est petite (mais très utile), elle est classée sous "astuce".

---


outerHTML (element.outerHTML) est une propriété javascript retournant une chaîne de caractère : le contenu de l'élément en incluant les balises d'ouverture (et ses attributs) et de fermeture. Elle n'est pas supportée par tous les navigateurs.

Source / Exemple :


<html>
  
  <head>
    <title>Exemple : Émulation OuterHTML</title>
    <script type="text/javascript">
      function setOuter(tn, ty) {
        yt = document.createElement("div");
        yt.innerHTML = ty;
        ty2 = document.createDocumentFragment();
        var n = yt.childNodes;
        var j = n.length;
        for (var i = 0; i < j; i++) {
          ty2.appendChild(n[i].cloneNode(true));
        }
        tn.parentNode.replaceChild(ty2, tn);
      }

      function getouterHTML(tn) {
        var element = document.createElement('div');
        element.appendChild(tn.cloneNode(true));
        return element.innerHTML;
      }
    </script>
  </head>
  
  <body>
    <div>
      <b>AA</b>
      <div id="a">Texte à supprimer</div>
      <div id=b>ainsi que celui-ci</div>
    </div>
    <button onclick="setOuter(document.getElementById('a'),'<b>BB</b>');setOuter(document.getElementById('b'),' <b>CC</b> <b>DD</b>');">Faire les changements</button>
    <div style="position:absolute;top:100px;left:30px;background:red;cursor:pointer;"
    onclick="alert(getouterHTML(this));return false;">CLIQUER ICI POUR CONNAÎTRE L'OUTERHTML</div>
  </body>

</html>

Conclusion :


Comme j'en avais besoin et que le code que l'on me proposait fonctionnait mal, j'ai créé celui-ci et je l'ai mis ici en pensant que peut-être quelqu'un en aurait besoin.

JDMCreator

A voir également

Ajouter un commentaire

Commentaires

jdmcreator
Messages postés
656
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
3 -
Bonjour,

Quelques deux ans et quelques mois plus tard, je mets à jour la source : Il n'y a désormais plus de restrictions pour remplacer le outerHTML (c-à-d : On peut le remplacer par plusieurs Nodes), j'ai optimisé la vitesse et je l'ai rendu plus clair !

Bonne journée !
jdmcreator
Messages postés
656
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
3 -
Bonjour,

j'ai mis une modification : on peut maintenant modifier le outerHTML ;)
jdmcreator
Messages postés
656
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
3 -
Dans l'exemple où je l'utilise, je fais un éditeur WYSIWYG (What You See Is What You Get) et l'outerHTML me permet d'analyser des éléments ;) Mais il existe des tas d'autres applications où cela peut servir ;)
spinosaurus
Messages postés
19
Date d'inscription
mercredi 23 août 2006
Statut
Membre
Dernière intervention
3 décembre 2009
-
ça a l'air sympa, mais ça sert à quoi (je dis ça parce que je ne vois pas où, quand et pourquoi l'utiliser)?
Comme je suis curieux de nature, je pose donc la question..
:-)
jdmcreator
Messages postés
656
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
3 -
Merci,

Je reposte la source avec les modifications plus tard ;)

JDMCreator

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.