Discussion :

[nicomax34]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Invité]

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

[E.Bzz]

Bonjour,

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+

[nicomax34]

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

[javatwister]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[nicomax34]

merci pour ces infos javatwister

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Invité]

Ah tiens, c'est en contradiction avec ta signature

je suis un incompris

[Bovino]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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 !

Par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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é

[Eric2a]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>