begin process at 2012 05 28 09:43:42
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Trucs & Astuces

 > ÉMULER OUTERHTML

ÉMULER OUTERHTML


 Information sur la source

Note :
9 / 10 - par 1 personne
9,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Trucs & Astuces Classé sous :outerHTML, innerHTML, Internet Explorer, outerText, émulation Niveau :Débutant Date de création :23/09/2009 Date de mise à jour :31/01/2012 02:38:09 Vu :3 361
Auteur : jdmcreator

Ecrire un message privé
Site perso
Commentaire sur cette source (6)
Ajouter un commentaire et/ou une note

 Description

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

  • <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>
<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


 Historique

23 septembre 2009 02:27:40 :
Faute de syntaxe HTML
17 novembre 2009 04:02:25 :
On peut maintenant modifier le outerHTML à l'aide la fonction setOuter à certaines limites. Ainsi, la limite est que le nouveau outerHTML sera uniquement le premier élément (HTML ou texte) du code mis en argument.
31 janvier 2012 02:38:10 :
Mise à jour : Plus de restrictions pour la modification du outerHTML + Plus rapide + Mieux présenté

 Sources du même auteur

Source avec Zip JDMATH-MINI.JS : GÉNÉRATION D'EXPRESSION MATHÉMATIQUE
PARSER LES CARACTÈRES HTML D'UNE STRING
Source avec Zip TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS
RÉPÉTER UN VIDÉO YOUTUBE EN JAVASCRIPT À L'AIDE D'UN MARQUE-...
Source avec Zip 20 ASTUCES POUR PROGRAMMEURS JAVASCRIPT AVANCÉS
Toutes les sources de jdmcreator

 Sources de la même categorie

PARSER LES CARACTÈRES HTML D'UNE STRING par jdmcreator
CONSTRUCTION D'UNE TABLE TRIABLE À PARTIR D'UN TABLEAU 2D par phm
Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator
Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol
Toutes les sources de la catégorie Trucs & Astuces

 Sources en rapport avec celle ci

Source avec Zip DOMBUILDER par Kimjoa
AJOUTER 'ADDEVENTLISTENER' SUR INTERNET EXPLORER par li9
Source avec une capture POURQUOI MES SCRIPTS AJOUTÉS DYNAMIQUEMENT (AJAX, XSLT, ...)... par FREMYCOMPANY
Source avec Zip Source avec une capture JEUX DE MOTS À RAYER par corsica

Commentaires et avis

Commentaire de Kimjoa le 23/09/2009 12:54:04 9/10

bien joué, j'avais fais en code un peux pareil y a longtemps mais je mettais carrément pris la toute a relire les attributs ect..

j'ai pensé que ca marcherais pas sur des balise td, tr ect..., mais en faite si :) !!

sinon tu étend le prototype de objet , c'est pas cool :) , sur IE un n½ud n'est pas une instance dérivé de Object, faut étendre HTMLElement ou Element, mais IE < 8 connais pas :(, de plus ça marche pas sous FF.

le mieux aurait été de faire une fonction classique avec en argument l'élément.

a++

Commentaire de jdmcreator le 23/09/2009 13:58:26

Merci,

Je reposte la source avec les modifications plus tard ;)

JDMCreator

Commentaire de spinosaurus le 28/09/2009 09:41:22

ç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..
:-)

Commentaire de jdmcreator le 29/09/2009 03:55:41

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 ;)

Commentaire de jdmcreator le 17/11/2009 04:03:15

Bonjour,

j'ai mis une modification : on peut maintenant modifier le outerHTML ;)

Commentaire de jdmcreator le 31/01/2012 02:40:14

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 !

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

pb IFRAME.innerHTML vs IFRAME.designMode [ par mbertier ] Salut, La fonction Init() ci-dessous (appelée dans BODY onLoad) me renvoie l'erreur suivante : "iView.document.body n'est pas un objet" Si je laisse l innerHTML, caractères spéciaux & formulaires [ par donben ] Bonjour, je souhaite récupérer des données provenant d'une base mySQL et réinitialiser les valeurs de champs de textes situés sur un calque caché avec pb de getElementById [ par kidpigeyre ] for(var i=0;i&lt;document.getElementById("tete").length;i++) { document.getElementById("tete")[i].innerHTML=document.getElementById("tete")[i innerHTML sous Mac [ par boin ] luss,voici un code classique : document.getElementById('id').innerHTML="&lt;input name='txt' type='text' size='20'&gt;";et je viens de remarquer Problème pour jouer un midi [ par zzzzzz ] Salut, je suis netraind e faire un site en php avec des amis. Cependant je ne m'y connais rien en javascript et le pote qui s'occupe des codes javascr Problème sur les midis [ par zzzzzz ] Salut :)JE vais me répété mais ca genera pas, je ne m'y connais strictement rien en javascript et la personne qui s'oqp du javascript sur mon site est questions sur div.innerHTML [ par kimmelf2 ] je souhaiterais generer un message style sloggan publicitaire qui se modifie automatiquement toutes les 5 secondes.j'ai fais un truc avec une div et i GetElementById dans une autre frame [ par snowteam ] Bonjour,J'ai un petit problème. Je fait un frameset, appelé fs, avec gauche et droite. Dans gauche, j'ai un bouton qui va faire un innerHTML dans un l Incompatibilté navigateur [ par porciner ] &lt;script language="javascript1.2"&gt;function writit(text,id){&nbsp;if(document.getElementById)&nbsp;{&nbsp;&nbsp;x=document.getElementById(id);&nbs probleme mozilla [ par javert ] salut, je vient de faire un petit calendrier en js, mais il ne fonctionne malheureusement pas sous mozilla. impossible de lui faire comprendre la li


Nos sponsors


Sondage...

Comparez les prix


Samsung Galaxy S
Entre 529€ et 529€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,342 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)