[DOM] peut on editer du code html avec du javascript?

Version imprimable

19/06/2007, 17h07
raul_le_vieux

[DOM] peut on editer du code html avec du javascript?

Salut vous tous

peut on editer du code html avec du javascript?

comme on fait en JSP par exemple

Code:

out.println("<html>")

merci de votre reponse
19/06/2007, 17h20
SpaceFrog

on peut en effet par différente methodes...

document.write ... mais bof

si tu cherches à modifier des choses sur la page passes plutot par
innerHMLT
data
et par le DOM ...

Quel est le but précis de la chose ?

merci de ta reponse deja;)

je veux afficher qq diagrammes (des images) dans une balise div.

je dispose d un select avec les noms des image en options, alors l'image afficher dans la balise div doit changer selon le choix dans le select.
Code:

1 2 3 4 5 6 <select name="chartSel" id="chartSel" multiple ondblclick="javascript:display();"> <option id="load.gif">number of loads</option> <option id="prio.gif">number of priority loads </option> <option id="redo.gif">number of Redo loads </option> </select>
je veux que display() edite le code suivant:
Code:

1 2 3 4 <div> <img src="./(image selectionee) width="200" height="200" border="0"> </div>

20/06/2007, 09h13
SpaceFrog

ton div et ton image existent déj sur la page ou tu veux les créer de toute pièce et les ajouter dasn la page ?
si oui tu veux les ajouter à un endroit précis ?
20/06/2007, 09h41
raul_le_vieux

J'aimerai bien pouvoir creer le div et l'image par la fonction javascript.

pour l'endroit ce serais super si je peux le controler, sinon c pas tres important

he le souci est que ton select est multiple .. tu veux pouvoir créer plusieurs div en même temps ?

pour un seul div à la fois ajouté à la fin de la page ...
<script type='text/javascript' >

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
function DisPlay(sources){
 var NewDiv= document.createElement('div');
 var NewImage= document.createElement('img');
 NewImage.src=sources;
 NewDiv.appendChild(NewImage);
 document.body.appendChild(NewDiv)
 
}
</script>
 
</head>
 
<body>
<select name="chartSel" id="chartSel" multiple ondblclick="DisPlay(this.value);">
<option value="load.gif">number of loads</option>
<option value="prio.gif">number of priority loads </option>
<option value="redo.gif">number of Redo loads </option>
</select>
</body>

20/06/2007, 10h04
raul_le_vieux

Oui c ca!

pour chaque option selectionee, un div et une image seront cree "dynamiquement"
20/06/2007, 10h06
raul_le_vieux

Je tien a preciser que j'ai reussi a faire sa en JSP, mais etant donne que le clien dispose de toutes les images, il serai bcp plus simple et plus rapide de le faire en javascript (enfin je croi:lol: )

mouiap mais du coup ça devient moins ergonomique ...

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
<script type='text/javascript' >
 
function DisPlay(sources){
 for (i=0;i<sources.options.length;i++){
 if (sources.options[i].selected){
	 var NewDiv= document.createElement('div');
 	var NewImage= document.createElement('img');
 	NewImage.src=sources.value;
 	NewDiv.appendChild(NewImage);
 	document.body.appendChild(NewDiv)
 	}
 }
}
</script>
 
</head>
 
<body>
<select name="chartSel" id="chartSel" multiple ondblclick="DisPlay(this);" style="width:400px;">
<option value="load.gif">number of loads</option>
<option value="prio.gif">number of priority loads </option>
<option value="redo.gif">number of Redo loads </option>
</select>
</body>

le doubleclick doit de faire en même temps que la dernière selection c'est a dire soit en shift ou en ctrl ...

et puis un autre double click recréé encore les images ...

faudrait tout coller dans un seul et même div ...

en fait ça donnerait ça:
avec vidage avant remplissage

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
<script type='text/javascript' >
 
function DisPlay(sources){
 
while (document.getElementById('container').childNodes.length>0){
	document.getElementById('container').removeChild(document.getElementById('container').firstChild)
	}
 
 for (i=0;i<sources.options.length;i++){
 if (sources.options[i].selected){
	 var NewDiv= document.createElement('div');
 	var NewImage= document.createElement('img');
 	NewImage.src=sources.value;
 	NewDiv.appendChild(NewImage);
 	document.getElementById('container').appendChild(NewDiv)
 	}
 }
}
</script>
 
</head>
 
<body>
<select name="chartSel" id="chartSel" multiple ondblclick="DisPlay(this);" style="width:400px;">
<option value="load.gif">number of loads</option>
<option value="prio.gif">number of priority loads </option>
<option value="redo.gif">number of Redo loads </option>
</select>
<div id='container'><div></div></div>
</body>
 
</html>

20/06/2007, 10h25
raul_le_vieux

c bien sa ce que je cherchais,

pour le double click c'est pas un probleme je peux le remplacer par un simple bouton !

Merci bien :king:
20/06/2007, 10h26
Auteur
juste une précision au niveau de la syntaxe :
Code:

1 2 <select name="chartSel" id="chartSel" multiple="multiple" ondblclick="DisPlay(this);" style="width:400px;">
(et l'attribut name n'est pas obligatoire)