createElement('br') produit c'est normal docteurs ?

**BaygonV** · 14/03/2015, 22h42

Je crois que tout est dans le titre.
Il me semblait que la 'bonne pratique' de l'html voulait que l'élément s'écrive .
Pourtant sous chrome (je n'ai pas testé ailleurs) si je fais quelquechose du type

Code :

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

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

alors

Code :

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

bidule.innerHTML;

contient

Code :

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

<br>

Dois je m'en préoccuper ?

**Watilin** · 15/03/2015, 03h47

Vu qu'il s'agit de HTML généré par le script, on se moque un peu de la syntaxe. De plus, je pense que ça dépend du navigateur, et peut-être aussi du DOCTYPE de la page. Pour info, chez moi (sous Firefox 36) sur ce forum, j'obtiens aussi .

La « bonne pratique » c'est essentiellement respecter le DOCTYPE. Avec xHTML, le / est obligatoire car le code HTML doit être compatible avec XML. Avec HTML 4 ou 5, ce n'est pas obligatoire.

**CosmoKnacki** · 15/03/2015, 05h30

Effectivement la syntaxe des balises produites par javascript dépend du type de document et du header envoyé par le serveur. Si ce dernier envoie la page comme text/html, javascript produira se contentera de la syntaxe html, de même si la DTD est omise ou ne correspond pas à du xhtml. La page doit être servie comme application/xhtml+xml pour que javascript tilte. 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
19
20
21
22
23
<?php 
header('Content-type: application/xhtml+xml');
echo '<?xml version="1.0" encoding="utf-8" ?>' . "\n"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
        <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
        <title>test</title>
        <script type="text/javascript">
(function() {
    document.addEventListener('DOMContentLoaded', function() {
        var div = document.getElementById('test');
        var br = document.createElement('br');
        div.appendChild(br);
        alert(document.getElementsByTagName('html')[0].innerHTML);	
    }, false);
})();
        </script>
    </head>
    <body>
        <div id="test"></div>
    </body>
</html>

**danielhagnoul** · 15/03/2015, 10h03

Code :

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

document.body.appendChild( document.createElement( "br" ) ); // <br>

C'est normal !

Vive jQuery !

Code :

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

1
2
3
$( "body" ).append( "br" ); // texte "br"
 
$( "body" ).append( "<br/>" ); // tag <br>

**sekaijin** · 15/03/2015, 13h11

Envoyé par BaygonV

Je crois que tout est dans le titre...

createElement('br') produit c'est normal docteurs ?

createElement('br') ne produit pas .
createElement('br') crée un objet dans le DOM.

Cet Objet est conforme à la spécification HTML et au binding W3C vers javascript.

à aucun moment la méthode createElement('br') ne produit de ou .

Si ce n'est createElement('br') d'où vient le problème si problème il y a ?

Pour comprendre il faut lire la Spec qui précise que ce qui est normalisé c'est le DOM (contrairement au specs précédentes) et que le CODE HTML est une sérialsation du DOM.

et c'est dans cette sérialisation qu'il faut chercher.
en effet innerHTML retourne la sérialisation du DOM contenu dans l'élément sélectionné.

Les méthodes de sérialisations (il y en a plusieurs) retourne un code HTML qui dépends du doctype demandé.
ce qui est normal puisque le code produit doit être interpétable par le moteur HTML avec ce doctype.

Envoyé par w3c

4.2 Serializing

The following steps form the fragment serializing algorithm, whose arguments are a Node node and a flag require well-formed:

Let context document be the value of node's node document.
If context document is an HTML document, return an HTML serialization of node.
Otherwise, context document is an XML document; return an XML serialization of node passing the flag require well-formed.
NOTE
The XML serialization defined in this document conforms to the requirements of the XML fragment serialization algorithm defined in [HTML5].

To produce an HTML serialization of a Node node, the user agent must run the HTML fragment serialization algorithm [HTML5] on node and return the string produced.

To produce an XML serialization of a Node node given a flag require well-formed, run the following steps:

Let context namespace be null. The context namespace is changed when a node serializes a different default namespace definition from its parent. The algorithm assumes no namespace to start.
Let namespace prefix map be a new map for associating namespaceURI and namespace prefix pairs, where namespaceURI values are the map's keys, and prefix values are the map's key values. The namespace prefix map will be populated by previously seen namespaceURIs and their most recent prefix associations for a subtree. Note: the namespace prefix map only associates a single prefix value with a given namespaceURI. During serialization, if different namespace prefixes are found that map to the same namespaceURI, the last one encountered "wins" by replacing the existing key value in the map with the new prefix value.
Initialize the namespace prefix map with the XML namespace key and string "xml" as the key value.
Let generated namespace prefix index be an integer with a value of 1. The generated namespace prefix index is used to generate a new unique prefix value when no suitable existing namespace prefix is available to serialize a node's namespaceURI (or the namespaceURI of one of node's attributes). See the generate a prefix algorithm.
Return the result of running the XML serialization algorithm on node passing the context namespace, namespace prefix map, generated namespace prefix index reference, and the flag require well-formed. If an exception occurs during the execution of the algorithm, then catch that exception and throw a DOMException with name "InvalidStateError".

An XML serialization differs from an HTML serialization in the following ways:

Elements and attributes will always be serialized such that their namespaceURI is preserved. In some cases this means that an existing prefix, prefix declaration attribute or default namespace declaration attribute might be dropped, substituted or changed. An HTML serialization does not attempt to preserve the namespaceURI.
Elements not in the HTML namespace containing no children, are serialized using the self-closing tag syntax (i.e., according to the EmptyElemTag production of [XML10]).

Otherwise, the algorithm for producing an XML serialization is designed to produce a serialization that is compatible with the HTML parser. For example, elements in the HTML namespaceclosing tag syntax [XML10].

NOTE
Per [DOM4], Attr objects do not inherit from Node, and thus cannot be serialized by the XML serialization algorithm. An attempt to serialize an Attr object will result in a TypeError exception [WEBIDL].

A+JYT

**BaygonV** · 15/03/2015, 15h11

Bon j'ai lu vos réponses et oui seikajin j'ai bien compris que

createElement('br') ne produit pas .
createElement('br') crée un objet dans le DOM.

J'ai utilisé un raccourci malheureux.

Je vous explique plus avant mon problème.

J'ai écrit un exe qui produit du code javascript de manière automatique.
Au moment ou j'ai ecrit cet executable je ne connaissais rien ou presque au javascript du coup le code généré reflète trop franchement ma meconnaissance et est pour le moins spaghetiesque.
Dans l'espoir de pouvoir modifier mon executable afin qu'il produise un code plus propre je lis un cours de javascript trouvé sur le net et j'y ai trouvé une série d'exercices qui sont censés m'apprendre à manipuler le code html d'une page via un script javascript.

J'en ai été amené à écrire un truc comme ça :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
function appendText(e,text) //Ajoute un Noeud Textuel contenant la chaine /text/ à l'élément /e/.
{
    e.appendChild(document.createTextNode(text));
}
 
function appendElt(e,type)// Ajoute un noeud de type /type/ à l'élément /e/ et retourne une référence sur le noeud créé.
{
var myElt = document.createElement(type);
e.appendChild(myElt);
return myElt;
}
 
var textArray ; // tableau de chaines de travail de la fonctioin create ci-dessous.
 
var pileElt = [document.body];// pile de travail de la fonction create ci-dessous.
 
var iteratorText = 0;// indice de la chaine de caractere à inclure dans un noeud textuel voir ci-dessous.
 
 
function peek(a) //retourne le dernier élément d'un tableau (vu comme une pile).
{return a[a.length-1];}
 
/*************************************************************************
La fonction create ci-dessous prend en argument une structure organisée sous forme de tableau.
La grammaire de cette structure étant :
 
STRUC_DE_CREATE : ['text#'] 
                                      | [ TYPE, [ ATTRS ], STRUC_DE_CREATE_list ]
 
ATTRS : attrname , attrvalue , ATTRS_list
 
TYPE :  'htmltype' // htmltype étant un div, un ul ... 
 
****************************************************************************/
 
function create(a) //a est une structure formatée selon la grammaire ci-dessus.
{
    if((!a)||(a.length==0)) return; // sort immediatement si a est vide ou si a n'existe pas
    if (a[0]==='text#')  /* Si il s'agit d'un noeud textuel */
	{
          appendText(peek(pileElt),textArray[iteratorText]) ; //ajoute a l'élément en tête de pile le noeud textuel contenant la chaine actuelle
          iteratorText++;  // on passe à la chaine suivante
          return; // on sort
        } 
    else{                    /* S'il s'agit d'un noeud html */   
	var myElt = appendElt(peek(pileElt),a[0]); // ajoute ce noeud a l'element en tête de pile
	for (var i=0,c=a[1].length; i<c; i+=2) // boucle de parcours de [ATTRS ]
	    myElt.setAttribute(a[1][i],a[1][i+1]);  // Donne a l'attribut(attrname) sa valeur (attrvalue).
	pileElt.push(myElt); // Empile ce noeud 
	for(var i=2,c=a.length;i<c;i++) // appelle récursivement create sur chacun des éléments de la liste STRUC_DE_CREATE_list 
	    create(a[i]);
	pileElt.pop(); //une fois la boucle finie, sort ce noeud de la pile de travail.
    }
}

Bon c'est pas joli joli vu que ça travaille sur des variables globales mais j'imagine que quand je saurai créer des classes en javascript je pourrai rendre tout cela plus propre.

Ensuite la création d'un élément correspondant au code :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div id="divTP1">
Le <strong>World Wide Web Consortium</strong>, abrégé par le sigle
<strong>W3C</strong>, est un
<a href="http://fr.wikipedia.org/wiki/Organisme_de_normalisation"
title="Organisme de normalisation">organisme de standardisation</a>
à but non-lucratif chargé de promouvoir la compatibilité des
technologies du <a
href="http://fr.wikipedia.org/wiki/World_Wide_Web" title="World Wide
Web">World Wide Web</a>.
</div>

Se 'réduit' à :

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
19
20
21
22
23
 
 
var struct =  //Description de l'arbre du noeud selon la grammaire ci-dessus
[ 'div', ['id', 'divTP1'], ['text#'], 
           ['strong', [], ['text#']], 
           ['text#'],
           ['strong', [], ['text#']],
           ['text#'],
           ['a', ['href', 'http://fr.wikipedia.org/wiki/Organisme_de_normalisation',
		   'title', 'Organisme de normalisation'],
	          ['text#'] ], 
           ['text#'], 
           ['a', ['href', 'http://fr.wikipedia.org/wiki/Word_Wide_Web', 
		   'title', 'World Wide Web'],
	          ['text#']]
];
 
 
 
var text="Le /Word Wide Web Consortium/, abrégé par le sigle /W3C/, est un /organisme de normalisation/ à but non lucratif chargé de promouvoir la compatibilité des technologies du/Word Wide Web"; //Le texte complet du noeud est ecrit en le preparant au split.
 
textArray=text.split('/'); //construction du tableau de chaines de travail de create.
create(struct); // creation du noeud.

Voila, tout ça pour dire que maintenant je peux assez facilement créer n'importe quel nœud.
La question que je me posais était donc, une fois le nœud créé, puis je obtenir une version 'en dure' de ce nœud et du coup j'ai pensé a
innerHTML d'où la question de départ.

Maintenant que j'ai écrit tout ça je me demande si c'était bien utile vu que ma question est finalement simple :
les balises orphelines peuvent elles se terminer en '>' en html5 ?
Encore une fois je pensais que la 'bonne pratique' voulait qu'on les termine en '/>'.

**CosmoKnacki** · 15/03/2015, 16h07

Il ne s'agit pas de bonne ou mauvaise pratique. À la question: "les balises orphelines peuvent elles se terminer en '>' en html5 ?", la réponse est oui. Par contre si tu décides de produire un document conforme à la syntaxe xml (ce que l'on appelle alors du "xhtml5"), dans ce cas non. Il faut savoir que, hormis les cas où tu souhaites exploiter plus tard le document comme du xml, le fait de suivre cette syntaxe ne sert pas à grand chose, si ce n'est de garde fou ou pour les nostalgiques du xhtml, de la à dire qu'il s'agit d'une bonne pratique, ça reste à voir.

**Watilin** · 15/03/2015, 16h24

Envoyé par BaygonV

Voila, tout ça pour dire que maintenant je peux assez facilement créer n'importe quel nœud.
La question que je me posais était donc, une fois le nœud créé, puis je obtenir une version 'en dure' de ce nœud et du coup j'ai pensé a
innerHTML d'où la question de départ.

On peut voir la chose ainsi : tu as créé une « traduction » du DOM, une autre façon de le sérialiser. C'est une version qui utilise des tableaux JavaScript mais au final elle représente la même chose que le code HTML, et elle se traduit en la même structure DOM. En fait tu as simplement inventé une nouvelle représentation du DOM.

Si on veut, un extrait de code JS qui utilise les méthodes standard (createElement, appendChild, etc.) est aussi une représentation du DOM. Au final, ta manière, la manière « méthodes standard » ou la manière innerHTML sont équivalentes. Je pense qu'on peut difficilement faire plus concis que le code HTML, qui a le mérite d'être connu de tout le monde, et si on prend l'exemple de jQuery, c'est pour ça que cette lib a choisi des chaînes HTML pour toutes ses manipulations du DOM.

les balises orphelines peuvent elles se terminer en '>' en html5 ?
Encore une fois je pensais que la 'bonne pratique' voulait qu'on les termine en '/>'.

Ben demande au validateur : http://validator.w3.org/
Par exemple un code qui contient <meta charset="utf-8"> passe la validation, donc tu peux en déduire que le slash n'est pas obligatoire. Mais personnellement, ça m'arrive d'avoir envie de le mettre juste pour la lisibilité.

**BaygonV** · 15/03/2015, 20h50

Merci pour toutes vos réponses.
Je clos le fil.

createElement('br') produit <br> c'est normal docteurs ?

JavaScript

Discussions similaires

Partager

Partager