Ayuda con createElement

GardBeat · #1 (**permalink**) 07/01/2010, 17:01

Buenas.

Necesitaria saber como podria crear un <input type="text">, un radiobutton y un checkbox con el createElement, he estado mirando por internet y foros y no encuentro nada claro. Gracias de antemano por vuestra ayuda.

mauro770 · #2 (**permalink**) 07/01/2010, 17:22

que tal , no se si te servira de algo ...

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
</head>
<script  type="text/javascript">
function crear() {
document.getElementById('caja').innerHTML = ''+ 
'<input type="text"></input>';
}
</script>
<body>
<input name="crear input type='text' " type="button" value="crear input type='text"  onclick="crear();"/>
<div id="caja"></div>
</body>
</html>

y lo puedes personalizar un poco ...

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
</head>
<script  type="text/javascript">
function crear(tipo,id,donde,valor) {
if(tipo == 1 ){
document.getElementById(donde).innerHTML = ''+ 
'<input type="text" id="'+id+'" value ="'+valor+'"></input>';
}
if(tipo == 2 ){
document.getElementById(donde).innerHTML = ''+ 
'<input type="checkbox" id="'+id+'" value ="'+valor+'"></input>';
}
}
</script>
<body>
<input name="crear input type='text' " type="button" value="crear input type='text"  onclick="crear(1,'id_text','caja','nuevo input text');"/>
<input name="crear input type='checkbox' " type="button" value="crear input type='checkbox"  onclick="crear(2,'id_checkbox','caja','nuevo input checkbox');"/>
<div id="caja"></div>
</body>
</html>

no se si sea tu caso , cualquier cosa comenta .

jseros · #3 (**permalink**) 07/01/2010, 17:29

Saludos GardBeat.

Lo que debes hacer es crear tres elementos del tipo <input /> y posterioremente establecer a cada uno el atributo type según necesites.

Código PHP:

  var inputText = document.createElement('input');
var inputRadio = document.createElement('input');
var inputCheck = document.createElement('input');

inputText.setAttribute('type', 'text');
inputRadio.setAttribute('type', 'radio');
inputCheck.setAttribute('type', 'checkbox');

Éxitos.

jackson666 · #4 (**permalink**) 07/01/2010, 17:35

Primero tenes que comprende que es cada cosa, asi entendes bien que es lo que estas creando. Veamos:

un "input" es un elemento del documento html. "Type" es un atributo de ese elemento "text" es el valor de ese atributo. Y asi sucesivamente y vale para cualquier etiqueta.

Teniendo en claro ese concepto:

Código HTML:

Ver original<html>
<head></head>
<body>
<a href="javascript:crear();">Crear elementos!</a>
 
<div id="contiene"></div>
 
<script type="text/javascript">
 
function crear(){
 
var div = document.getElementById("contiene");
 
var cajaTxt = document.createElement("input");
cajaTxt.type="text";
cajaTxt.value="Soy una caja de texto!";
 
var radio = document.createElement("input");
radio.type="radio";
radio.name="radio1";
radio.value="algo";
 
var check = document.createElement("input");
check.type="checkbox";
check.name="check1";
check.value="algo2";
 
div.appendChild(cajaTxt);
div.appendChild(radio);
div.appendChild(check);
 
}
</script>
 
</body>
</html>

GardBeat · #5 (**permalink**) 07/01/2010, 17:45

Ok, muchas gracias. Ya habia encontrado finalmente lo que buscaba que era el setAttribute, que no me acordaba. Ahora os vuelvo a lanzar otra pregunta, como puedo hacer para que me borre ahora los que he creado??

Le pongo un ejemplo que llevo:

Código Javascript:

Ver originalfunction nuevo_text() {
 
    var text = document.createElement("input");
    text.setAttribute('type','text');
    text.setAttribute('name','text1');
    text.setAttribute('value','Campo Texto');
    document.body.appendChild(text);
 
}

Se que puede ser algo asi, pero no me funciona, asi que no es correcto:

Código Javascript:

Ver originalvar t = document.getElementById("input");
    var t2 = t.getElementsByTagName("text1");
    var nodo = t2[t2.length-1];
    nodo.parentNode.removeChild(nodo);

Gracias de antemano.

jseros · #6 (**permalink**) 07/01/2010, 17:51

Es recomendable que asignes un valor al atributo id para poder seleccionar más rápido los elementos:

Código PHP:

    function nuevo_text() {
 
    var text = document.createElement("input");
    text.setAttribute('type','text');
    text.setAttribute('name','text1');
    text.setAttribute('id','text1');
    text.setAttribute('value','Campo Texto');
    document.body.appendChild(text);
 
}

   var nodo = document.getElementById("text1");
   nodo.parentNode.removeChild(nodo);

Éxitos

GardBeat · #7 (**permalink**) 07/01/2010, 18:11

Gracias jseros, me ha servido de mucho, pero ahora me surge otra duda, tengo un text area, al cual lo creo de la siguiente manera:

Código Javascript:

Ver originalvar textAr = document.createElement("textarea");
    document.body.appendChild(textArea);

Como puedo hacerle que se borre, gracias?? He probado a borrarlo directamente por textarea, pero no me funciona.

Gracias ... 1 saludo.

jseros · #8 (**permalink**) 07/01/2010, 18:21

Si no lo identificas a través de un ID es muy complicado hacer algo con éste luego de insertarlo. Se podría lograr obteniendo la posición dentro del árbol del documento, pero la solución más elegante es establecer un atributo ID; luego seleccionarlo a través de getElementById para posteriormente borrarlo.

También puedes hacerlo a través de la variable a la que lo asignas y después de haberlo insertado.

Código PHP:

        var textArea = document.createElement("textarea");
      document.body.appendChild(textArea);

      //....

      document.body.removeChild(textArea);

Éxitos

GardBeat · #9 (**permalink**) 07/01/2010, 18:27

Muchas gracias de nuevo, jseros, he optado por la primera opcion.

1 Saludo.