changement du type d'un noeud

Version imprimable

07/05/2006, 22h56
bibile

changement du type d'un noeud

Bonjour,

Est-ce que c'est possible de transformer facilement ca:

Code:

<p id="id1">une ligne</p>

en ca:

Code:

<input id="id1" type="text" value="une ligne">

a l'aide de javascript ?

merci !

normalement oui :

Code:

1
2
var tag = document.getElementById('id1');
tag.outerHTML = '<input id="id1" type="text" value="' + tag.nodeValue +'">';

sinon, il faut jouer sur le nodename et les différents attributs...

Code:

1
2
3
4
5
6
var tag = document.getElementById('id1');
tag.nodeName = 'input';
tag.setAttribute('id', 'id1');
tag.setAttribute('type', 'text');
tag.setAttribute('value', tag.nodeValue);
tag.innerHTML = '';

ou encore :

Code:

1
2
3
4
5
6
var tag = document.getElementById('id1');
var newtag = document.createElement('input');
newtag.setAttribute('id', 'id1');
newtag.setAttribute('type', 'text');
newtag.setAttribute('value', tag.nodeValue);
tag = newtag;

merci !

ton premier exemple marche avec IE, mais pas avec fireFox

la deuxieme ne marche pas avec IE (je crois qu'il connait pas 'nodeName')
et pas non plus avec firefox (il accepte pas tag.nodeName='input';

la 3ieme, ca semble ne rien donner du tout :?

ca vient peut-etre de ma facon de lancer le script.

je poste ta 3ieme methode avec le reste du code:
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 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>New Document</TITLE> <script language="Javascript"> function ChangeTag (id) { tag = document.getElementById(id); if (tag.tagName=='P') { var newtag = document.createElement('input'); newtag.setAttribute('id', id); newtag.setAttribute('type', 'text'); newtag.setAttribute('value', tag.nodeValue); tag = newtag; // alert("oui"); } else { // alert("non"); } //alert(tag.tagName); //alert(tag.innerHTML); } </script> </HEAD> <BODY> <form name="form1"> <p style="text-align:center;">Formulaire</p> <p id="d" onClick="ChangeTag('d');">bonjour</p> </form> </BODY> </HTML>

07/05/2006, 23h49
Swoög

arf, outerHTML qui va pas sous Firefox... je m'en doutais un peu ;)

en pièce jointe, une solution qui marche sous IE et FF ;) testé ^^
07/05/2006, 23h55
bibile

super ! merci bcp, ca marche parfaitement :D
07/05/2006, 23h57
Swoög

De rien, pense au résolu ;)