Convertir un input en un span y cabiarle el id

gersveo · #1 (**permalink**) 12/03/2009, 15:48

Buenas
Por cualquier ayuda muchas gracias.
Necesito copiar y pegar un elemento <input type="text" .... dentro de un span pero y hacer que desaparesca el <input type="text" que he copiado y solo quede el que está dentro del span, debo crear este span y darle un id parecido al que tiene el input id_del_input_span. Lo de copiar y pegar el elmento fue resuelto en este foro

Código PHP:

  <script> 
function copia_pega(){ 
        var html = document.getElementById('texto').cloneNode(true); 
    ....... proceso que conviete el input en span y  
    ....... luego cambia el id="texto" por id="texto_span" 
        document.getElementById('texto_span').appendChild(html) =  html ; 
} 
</script> 
<body> 
<input type="text" value="ajaklsd" id="texto" name="hola"> 
 
<input type="button" value="click" onClick="copia_pega();" > 
</body>

David · #2 (**permalink**) 12/03/2009, 21:01

Puedes usar removeChild para quitar un elemento:

Código javascript:

Ver originalvar padre = elem.parentNode;
padre.removeChild(elem);

gersveo · #3 (**permalink**) 13/03/2009, 08:04

El removeChild si me sirvió, pero no me he explicado bien. Lo que quiero lograr es meter individualmente en cada span los text que contenga una pagina pero que no se muevan para ningun otro lado osea algo asi:
antes

Código PHP:

  <body> 
<input type="text" value="ajaklsd1" id="texto1" name="hola" onclick="alert('ajaaaa1');" > 
<input type="text" value="ajaklsd2" id="texto2" name="hola" onclick="alert('ajaaaa2');" > 
<input type="text" value="ajaklsd3" id="texto3" name="hola" onclick="alert('ajaaaa');" > 
<input type="button" value="click" onClick="copia_pega();" > 
</body>

despues

Código PHP:

  <body> 
<span id="texto1_span"><input type="text" value="ajaklsd1" id="texto1" name="hola" onclick="alert('ajaaaa1');" ></span> 
<span id="texto2_span"><input type="text" value="ajaklsd2" id="texto2" name="hola" onclick="alert('ajaaaa2');" ></span> 
<span id="texto3_span"><input type="text" value="ajaklsd3" id="texto3" name="hola" onclick="alert('ajaaaa');" ></span> 
<input type="button" value="click" onClick="copia_pega();" > 
</body>

y aqui es donde voy

Código PHP:

  <script> 
function copia_pega(){ 
    var html, padre; 
    for(recorrer la pagina en busca de elementos input) 
    { 
        if(si el id de este input es de tipo "text") 
        { 
            html = document.getElementById( id_text ).cloneNode(true); 
            padre = document.getElementById( id_text ).parentNode; 
            padre.removeChild(document.getElementById( id_text )); 
            .... proceso que mete el input en el span y permanece en el mismo lugar en el que estaba el text anterior ..... 
        } 
    } 
} 
</script> 
<body> 
<input type="text" value="ajaklsd1" id="texto1" name="hola" onclick="alert('ajaaaa1');" > 
<input type="text" value="ajaklsd2" id="texto2" name="hola" onclick="alert('ajaaaa2');" > 
<input type="text" value="ajaklsd3" id="texto3" name="hola" onclick="alert('ajaaaa');" > 
<input type="button" value="click" onClick="copia_pega();" > 
</body>

David · #4 (**permalink**) 13/03/2009, 08:22

Podría ser algo así:

Código javascript:

Ver originalfunction copiar() {
    var padre = document;
    var newspan;
    var cloneinput;
    for (i = 0, elems = document.getElementsByTagName("input"); elem = elems[i]; i++) {
        if (elem.type == "text") {
            padre = elem.parentNode;
            cloneinput = elem.cloneNode(true);
            newspan = document.createElement("span");
            newspan.id = elem.id + "_span";
            padre.insertBefore(newspan, elem);
            newspan.appendChild(cloneinput);
            padre.removeChild(elem);
        }
    }
}

gersveo · #5 (**permalink**) 13/03/2009, 08:41

Esto era lo que estaba tratando de hacer. Muchisimas gracias.