Émuler outerhtml

Commenter

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

S'inscrire maintenant

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.

Du même auteur (jdmcreator)