ajout dynamique de balises html

salutatous,

j'ai créé un formulaire qui me permet d'ajouter dynamiquement des champs par le biais d'un submit

voulant séparer ces champs par la balise <br />, au début j'ai utiliser "createTextNode" :

Code:

---

calque.appendChild(document.createTextNode("<br /><br />"));

---

mais comme ça ne fonctionnait pas, j'ai ensuite utiliser "createElement" qui lui fonctionne, comme ceci :

Code:

---

calque.appendChild(document.createElement('br'));

---

et en cherchant je viens de tomber sur "innerHTML" que j'ai essayé, comme ceci :

Code:

---

calque.appendChild(document.getElementById(?????).innerHTML = "<br /><br />");

---

question 1 :
quelle est la meilleure méthode, "createTextNode" ou "innerHTML"

question 2 :
pour "innerHTML", que dois-je mettre à la place des points d'interrogation ?

merci d'avance

document.createTextNode sa reste de la programmation, innerHTML c'est moche peut lisible et pas modulable c'est un peut comme du flash dans une page sa n'a rien a voir avec javascript

Bonjour,

Citation:

---

Envoyé par mekal

document.createTextNode sa reste de la programmation, innerHTML c'est moche peut lisible et pas modulable c'est un peut comme du flash dans une page sa n'a rien a voir avec javascript

---

Ah tiens, c'est en contradiction avec ta signature ;)

@nicomax34 > Puisque tu ajoutes des éléments, tu modifies le DOM de ta page.
Il est donc tout à fait logique et préférable d'utiliser les instructions prévues à cet effet.
Bien que innerHTML fonctionne aussi sans problème dans certains cas ...

A+

Ok merci je vais voir du côté du DOM

salut

pour commenter,

la notion de "textNode" est incompatible avec celle de "balise", donc, évidemment, ton premier essai ne marchait pas;

innerHTML (et rappelons que Microsoft était aussi l'heureux inventeur d'un innerText) est une aberration qui continue à être tolérée par l'ensemble des browsers; propriété magique par excellence, elle te permet d'écrire les bêtises suivantes:

Code:

---

1 2 3

<img src="image.gif" id="im" alt="image" /> ... document.getElementById("im").innerHTML="<a href='' id='lnk'>lien</a>";

---

joyeux bordel dans le DOM de la page, bugs prévisibles, apprenti-sorcellerie, etc.

intervenir sur une architecture html s'effectue aujourd'hui de manière plus écologique :mrgreen: , en respectant la logique des balises block / inline et en préservant les neurones du navigateur;

autre point: si tu veux permettre l'ajout de champs, fais-le avant le "submit"; pas besoin de faire un aller retour au serveur pour ajouter ta ligne html;

merci pour ces infos javatwister

Salut,

innerHTML est très utile dans la plupart des cas. Tous les navigateurs le prennent parfaitement en compte.

C'est pour cette raison que le consortium W3C l'a adopté à partir de HTML5.

Code:

---

1 2 3 4

container=document.createElement('div'); container.innerHTML='<p>Je ne suis qu\'un petit paragraphe, et la fonction <strong>innerHTML<\/strong> est parfaitement adaptée pour moi'; document.body.appendChild(container);

---

Citation:

---

Ah tiens, c'est en contradiction avec ta signature

---

je suis un incompris :cry:

Citation:

---

Envoyé par Eric2a

Salut,

innerHTML est très utile dans la plupart des cas. Tous les navigateurs le prennent parfaitement en compte.

C'est pour cette raison que le consortium W3C l'a adopté à partir de HTML5.

Code:

---

1 2 3 4

container=document.createElement('div'); container.innerHTML='<p>Je ne suis qu\'un petit paragraphe, et la fonction <strong>innerHTML<\/strong> est parfaitement adaptée pour moi'; document.body.appendChild(container);

---

---

Bon puisqu'on se lance dans un débat théorique, je vais ajouter mon grain de sel :mrgreen:

Personnellement, bien qu'il m'arrive d'utiliser innerHTML comme beaucoup, je me range à l'avis de javatwister.
D'une part parce qu'il s'agit à la base d'une instruction propriétaire (reste à comprendre pourquoi innerHTML est devenu répandu et pas innerText, outerHTML ou outerText), mais aussi et surtout parce que comme le fait remarquer judicieusement javatwister, ça implique de mélanger des notions d'architecture DOM et du texte, en gros, ça revient à inventer l'addition de pommes et de poires si chère aux institutrices de mon enfance !

Enfin, lorsqu'on mélange les méthodes du DOM (createElement, appendChild, removeChild etc.) avec innerHTML on obtient des effets de bord assez surprenants puisqu'au final, c'est IE qui se met à planter ! :mouarf:

Par exemple :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<html> <head> <script type="text/javascript"> var div1 = document.createElement('div'); div1.appendChild(document.createTextNode('Contenu généré par le DOM')); function ajout(){ document.getElementById('test').innerHTML = ''; document.getElementById('test').appendChild(div1); } window.onload = ajout; </script> </head>   <body> <div id="test"></div> <input type="button" onclick="ajout()" value="Recommencer" /> </body> </html>

---

Avec IE, le contenu de div1 a été vidé ;)

Surprenant en effet Bovino !

Testé sur IE8 et confirmé... div1 est bien vidé.

Pour les puristes... Le même code 100% DOM, c'est Ok bien entendu. :)

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

<script type="text/javascript"> var div1 = document.createElement('div'); div1.appendChild(document.createTextNode('Contenu généré par le DOM')); function ajout(){ var test=document.getElementById('test'); while(test.hasChildNodes())test.removeChild(test.lastChild); // innerHTML non adapté dans ce cas test.appendChild(div1); } window.onload = ajout; </script>

---