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

**raul_le_vieux** · 19/06/2007, 17h07

Salut vous tous

peut on editer du code html avec du javascript?

comme on fait en JSP par exemple

Code :

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

out.println("<html>")

merci de votre reponse

**SpaceFrog** · 19/06/2007, 17h20

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 ?

**raul_le_vieux** · 19/06/2007, 17h35

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 :

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

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 :

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

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

**SpaceFrog** · 20/06/2007, 09h13

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 ?

**raul_le_vieux** · 20/06/2007, 09h41

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

**SpaceFrog** · 20/06/2007, 09h56

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 :

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

**raul_le_vieux** · 20/06/2007, 10h04

Oui c ca!

pour chaque option selectionee, un div et une image seront cree "dynamiquement"

**raul_le_vieux** · 20/06/2007, 10h06

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

)

**SpaceFrog** · 20/06/2007, 10h16

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

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
<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 ...

**SpaceFrog** · 20/06/2007, 10h20

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

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

**raul_le_vieux** · 20/06/2007, 10h25

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

**Auteur** · 20/06/2007, 10h26

juste une précision au niveau de la syntaxe :

Code html :

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

1
2
<select name="chartSel" id="chartSel" multiple="multiple" ondblclick="DisPlay(this);" style="width:400px;">

(et l'attribut name n'est pas obligatoire)

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

JavaScript

Discussions similaires

Partager

Partager