Suite à une discussion sur ce forum j'ai repensé à la problématique de façon plus générale.
la question était comment insérer un ligne en première position dans un tableau.
de façon plus globale avec DOM on peut se poser la question
"Comment insérer un Element comme premier fils ?"
la solution est relativement simpe puisque insertBefore permets d'insérer avant un Element et firstChild donne le premier.
insérer avant le premier réponds donc bien à la problématique.
on peut sen faire une petite fonction. mais en fait on peut aller plus loin:
enrichir le DOM une méthode prepend sur n'importe quel Element serait bienvenue
c'est l’approche que je vous propose.
Ajouter des méthodes au DOM c'est possible et c'est efficace.Nous ajoutons au prototype du constructeur d'Element DOM la méthode insertFirst
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7 Element.constructor.prototype.prepend = function(el) { if (this.hasChildNodes()) { this.insertBefore(el, this.firstChild); } else { this.appendChild(el) } }
rien de plus que ce que nous aurions écrit pour un élément donnée.
l'avantage c'est qu'à partir de là tout objet DOM bénéficie de cette méthode.
un exemple :
Code html : 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 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript" charset=iso-8859-1> Element.constructor.prototype.prepend = function(el) { if (this.hasChildNodes()) { this.insertBefore(el, this.firstChild); } else { this.appendChild(el) } } </script> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="PSPad editor, www.pspad.com"> <title>test</title> <script type="text/javascript" charset=iso-8859-1> function test() { //ajout d'un HR comme premier fils du parent de l'élément d'id 1 (ici le body) doc = document.getElementById(1).parentNode; doc.prepend(document.createElement('hr')); // ajout d'un premier fil à l'élément d'id 1 (qui n'en a pas encore) h1 = document.getElementById(1); h1.prepend(document.createTextNode('Hello')); } </script> </head> <body onload="test()"> pour test <h1 id='1' /> </body> </html>
Cette approche consistant à ajouter des méthode au DOM peut être employée pour tout ce qui vous parait nécessaire. par exemple vous ajoutez souvent des paquets d'attribut à des éléments rien de plus simpledu coup
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5 Element.constructor.prototype.setAttributes(attributes) { for (key in attributes) { this.setAttribute(key, attributes[key]); } }A+JYT
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6 document.getElementById(1).setAttributes({ align: "center", className: "truc", lang: "fr", dir: "ltr" });
Partager