[DOM] Injection de données dans des balises exotiques
Bonjour,
Voici le problème : Je dois créer un système de balises exotiques (avec un namespace bidon, peu importe s'il n'y a pas de validation HTML), permettant d'injecter des données issus d'objets javascript.
J'y suis presque mais je n'arrive pas à faire fonctionner cela dans internet explorer.
Voici le code de test :
Code:
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Exotic HTML</title>
<script language="Javascript">
function Thing(name) {
this.name = name;
}
function Display() {
this.init = function() {
this.list = document.getElementById("list").getElementsByTagName("li");
this.display = new Array();
for (var i = 0; i < this.list.length; i++) {
// Nouvel objet
this.display[i] = new Object();
// Référencer le noeud source
this.display[i].tags = this.list[i];
// Cloner en profondeur la hiérarchie pour s'en servir comme modèle pour lors des mises à jour
this.display[i].template = this.list[i].cloneNode(true);
}
}
this.doit = function() {
for (var i = 0; i < this.list.length; i++) {
// Remplacer les noeuds enfants par un clone en profondeur du modèle
this.display[i].tags.replaceChild(this.display[i].template.firstChild.cloneNode(true), this.display[i].tags.firstChild);
// Trouver le noeud à modifier
var elements = this.display[i].tags.getElementsByTagName("my:name");
// Pour internet explorer
if (elements.length == 0)
elements = this.display[i].tags.getElementsByTagName("name");
alert(elements[0].nodeType + " " + elements[0].nodeValue + " " + elements[0].nodeName);
// Injection des données
if (elements[0].hasChildNodes()) {
// Pour les navigateurs standards
elements[0].firstChild.nodeValue = elements[0].firstChild.nodeValue.replace(/name/, results[i].name);
} else {
// Pour internet explorer
var node = document.createTextNode(results[i].name);
elements[0].appendChild(node);
}
}
}
this.append = function() {
var debug = document.getElementById("debug");
var elements = this.display[0].tags.getElementsByTagName("my:name");
if (elements.length == 0)
elements = this.display[0].tags.getElementsByTagName("name");
debug.innerHTML = elements.toString() + " " + elements.length + " " + elements[0].nodeType;
var text = document.createTextNode(results[0].name);
elements[0].appendChild(text);
}
}
function init() {
display.init();
}
var results = new Array();
results[0] = new Thing("thing1");
results[1] = new Thing("thing2");
results[2] = new Thing("thing3");
var display = new Display();
</script>
</head>
<body onload="init();">
<ul id="list">
<li>
<my:thing>
<my:name>name</my:name>
</my:thing>
</li>
<li>
<my:thing>
<my:name>name</my:name>
</my:thing>
</li>
<li>
<my:thing>
<my:name>name</my:name>
</my:thing>
</li>
</ul>
<textarea id="debug" clos="80" rows="20"></textarea>
<button onclick="display.doit();">do it</button>
<button onclick="display.append();">append</button>
</body>
</html> |
L'erreur que j'ai est "Demande d'accès à la méthode ou aux propriétés inattendue" pour la ligne :
Code:
1
2
|
elements[0].appendChild(node); |
et la ligne
Code:
1
2
|
elements[0].appendChild(text); |
Qui saurait me dire pourquoi.
Merci
