changement du type d'un noeud

**bibile** · 07/05/2006, 22h56

Bonjour,

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

Code :

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

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

en ca:

Code :

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

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

a l'aide de javascript ?

merci !

**Swoög** · 07/05/2006, 23h23

normalement oui :

Code :

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

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 :

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

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 :

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

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;

**bibile** · 07/05/2006, 23h42

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 :

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