blog-notes: Remplacer tout un tag HTML en javascript 100% pur DOM

24 août 2006

Remplacer tout un tag HTML en javascript 100% pur DOM

Remplacer un morceau de page par un autre n'a jamais été très compliqué. On pouvait remplacer un tag par un gros bloc plus complexe, simplement en utilisant la propriété outerHTML de ce tag. Le problème est que outerHTML ne figure pas dans le DOM officiel de W3C.

Voici comment remplacer un tag par autre chose, simplement en connaissant l'id du tag en question.

Comme ce code n'utilise que les méthodes javascrpt proposées par le DOM niveau 1 W3C, ce code fonctionne dans tous les navigateurs respectant ces normes. Je l'ai testé avec Opera 9, IE 6 et Firefox 1.5

Voici la portion de page que l'on voudrait remplacer.

<dl id="remplacemoi">
 <dt>Umbrella</dt>
 <dd>Parapluie</dd>
 <dt>Piper</dt>
 <dd>Pipo</dd>
</dl>

moulinette("remplacemoi")

Voici ce par quoi on voudrait remplacer cette portion. On veut en fait entourer notre tag basique par de la mise en page. Beau ou pas beau, c'est juste un exemple.

<blockquote style="border-left:thick solid blue" onclick=""alert('coucou')">
 <h6 style="text-decoration:underline">Glossaire</h6>
 <dl id="remplacemoi">
  <dt>Umbrella</dt>
  <dd>Parapluie</dd>
  <dt>Piper</dt>
  <dd>Pipo</dd>
 </dl>
</blockquote>
<p>Youpi bla bla bla</p>

Finalement, voici le code qui permet le remplacement. C'est la ligne rouge qui effectue le remplacement (replaceChild(new, old)). La ligne bleue fait une copie de notre portion de page (cloneNode(deep)), c'est très pratique. Si deep est à true (notre cas) cela copie également tout les enfants de ce tag.

Toutes les autres lignes servent à construire des tag HTML avec les méthodes DOM W3C. C'est vraiment pas évident comparé au outerHTML, grâce auquel il suffit de taper en clair les tag HTML. Mais ça a le mérite de fonctionner partout.

function moulinette(id) {
 var source= document.getElementById(id);

 /* nouveau morceau de page */
 var fragment= document.createDocumentFragment();

 /* blockquote */
 var block= document.createElement("blockquote");
 block.style.borderLeft= "thick solid #333";
 block.style.paddingLeft= "4px";
 block.onclick= function() { alert("coucou"); };

 /* h6 */
 var titre= document.createElement("h6");
 titre.style.textDecoration= "underline";
 titre.appendChild(document.createTextNode("Glossaire"));

 /* h6 dans blockquote */
 block.appendChild(titre);

 /* copie de la source dans le blockquote */
 block.appendChild(source.cloneNode(true));

 /* paragraphe */
 var para= document.createElement("p");
 para.appendChild(document.createTextNode("Youpi bla bla bla"));

 /* blockquote dans morceau de page */
 fragment.appendChild(block)

 /* paragraphe dans morceau de page */
 fragment.appendChild(para);

 /* remplacement de la source par le morceau de page */
 source.parentNode.replaceChild(fragment, source);
}

jesus2099 . 14:35 . Poster ce message