crear un input type=text o textarea al hacer click

[eulloa]

Hola foreros:
Recién estoy comenzando con JS, detenidamente, pues lo había trabajado de lejos, confieso que me está gustando, pero como todo aprendiz me ha surgido esta duda.
Tengo dos días googleando, y he buscado en las FAQs del foro, pero nada que siquiera me ilustre, claro, pasa que el problema quizás sea muy puntual.
Bueno, lo que quiero es precisamente, tengo unos divs que cargan datos desde una consulta SQL, pero deseo que al hacerles click se conviertan en campos "text" o "textarea". Según el caso (cantidad de caracteres)
Cualquier ayuda me vendría bien, aclaro que no serían necesarios, de momento, que se desgasten en códigos que le roben mucho tiempo (si lo hacen pues mucho mejor ¿no? jajajaja), pero me conformaría con que alguien me de por lo menos la idea de como hacerlo.
Saludos y agradecido

[David]

Puedes usar document.createElement("input") o document.createElement("textarea") para crear esos elementos, luego, puedes llamar al método replaceChild() del nodo padre que contiene al div para reemplazarlo por el elemento deseado.

[eulloa]

Hola, lo siento, ayer escribí justo antes de irme del trab y releo ahora por la mañana.
OK, trateré de implementar e informo luego, pienso pasarme el día de hoy en esto.
hasta más tarde
salu2

[eulloa]

Código HTML:

                td3 = document.createElement("input");
		td3.type = "text";
		td3.setAttribute("name",own.id);
		divConvierte.appendChild(td3);

OK, esto es lo que he ido resolviendo, pero al crearse el elemento, cuando hago clic dentro vuelve a crearse otro
¿porque pasa?
¿qu estoy haciendo mal?

[eulloa]

Bueno, creo q ya lo he resuelto. Sustituí

divConvierte.appendChild(td3);

por

divConvierte.parentNode.appendChild(td3);

Aun me queda la duda, y en este tiempo que he tenido para leer no me aclaro.
¿Q quiere decir esto último?

[eulloa]

jejejejeejje, estoy resolviendo de a partes
Explico un poco más:
El script crea los campos, para mandarlos mediante ajax, a un php
OK
He comprobado que los input el php me los ve, pero los textarea no
Este es mi code

javascript para los textarea

Código:

                tarea = document.createElement("textarea");
		tarea.setAttribute("id",own.id);
		tarea.setAttribute("class","campoInput");
		tarea.type = "textarea";
		divConvierte.parentNode.appendChild(tarea);

para los text (input)

Código:

                td3 = document.createElement("input");
		td3.setAttribute("id",own.id);
		td3.setAttribute("class","campoInput");
		td3.type = "text";
		divConvierte.parentNode.appendChild(td3);

Al comprobar lo que paso por URL con:

Código PHP:

  echo $query =  $_SERVER['QUERY_STRING']; 
   

Los textarea no pasan
Otra vez
¿que estoy haciendo mal?

[David]

¿Cuál es el código que usas para enviar esos campos con AJAX?

P.S.: Los textarea no tiene atributo type, por lo que tarea.type = "textarea" está sobrando.

[eulloa]

Código:

function validaFormulario(id){

	var miValor = new Array();	
	var miID = new Array();	
	var cadena = new Array();

	divEditaProceso = document.getElementById('editarProceso');

	for (i = 0; i < fvalida.elements.length; i++) {	
		if (fvalida.elements[i].type == 'text'){
			miValor[i] = fvalida.elements[i].value;
			miID[i] = fvalida.elements[i].id;
			cadena[i] = miID[i]+"="+miValor[i];
		}
	}

	cad = cadena.join("&");

	//MIRAR PARA QUITAR EL ACT, PUES LO LLAMARÉ DESDE PHP
	//EL CAMPO ID SE LLAMA ACT PARA TODAS LAS CONSULTAS DE PROCESO
	url = "editarProceso.php?act="+id+cad;

	
	ajax=objetoAjax();
	ajax.open("GET", url);

	ajax.onreadystatechange = function() {
	        if (ajax.readyState==1) {
	                divEditaProceso.innerHTML="Buscando, espere...";
		}
		else if (ajax.readyState==3){
			divEditaProceso.innerHTML = "Completando, espere...";
		}
		else if (ajax.readyState==4){
			if(ajax.status==200){
				divEditaProceso.innerHTML=ajax.responseText;
			}
			else if(ajax.status==404){
				divEditaProceso.innerHTML = "La direccion no existe";
			}
			else{
		                divEditaProceso.innerHTML = "Error: ".ajax.status;
			}
		}
	}
	 ajax.send(null)
}

BUeno, esta es la función que uso para enviar los elementos a través de ajax. Me falta validar dos o tres cosas, si pudieran darme consejos sobre ella igual, o si es esta funcion la q parece tener problemas. Agradecido de antemano.
OK, anotado lo de type del textarea
salu2

[eulloa]

David, creo q soy un tonto en MAYUSCULAS. Viendo que esta funcion es la que parece tener el problema, pues

Código:

if (fvalida.elements[i].type == 'text')

Es lo q parece estar haciendo ¿no?
Mil disculpas por mi ceguera parcial, de todas formas arreglo y les cuento.
salu2

[eulloa]

Bueno, he resuelto el problema de los textarea (era problema mío jejeje, no del script)
Ahora se ve un poco mejor

Código:

function validaFormulario(id){

	var miValor = new Array();	
	var miID = new Array();	
	var cadena = new Array();

	divEditaProceso = document.getElementById('editarProceso');

	for (i = 0; i < fvalida.elements.length; i++) {
		if (fvalida.elements[i].value.length > 0){	
			if (fvalida.elements[i].type == 'text' || fvalida.elements[i].type == 'textarea'){
				
				miValor[i] = fvalida.elements[i].value;
				miID[i] = fvalida.elements[i].id;
				cadena[i] = miID[i]+"="+miValor[i];
			}
			
		}
	}

	cad = cadena.join("&");

	
	url = "editarProceso.php?act="+id+cad;

	
	ajax=objetoAjax();
	ajax.open("GET", url);

	ajax.onreadystatechange = function() {
	        if (ajax.readyState==1) {
	                divEditaProceso.innerHTML="Buscando, espere...";
		}
		else if (ajax.readyState==3){
			divEditaProceso.innerHTML = "Completando, espere...";
		}
		else if (ajax.readyState==4){
			if(ajax.status==200){
				divEditaProceso.innerHTML=ajax.responseText;
			}
			else if(ajax.status==404){
				divEditaProceso.innerHTML = "La direccion no existe";
			}
			else{
		                divEditaProceso.innerHTML = "Error: ".ajax.status;
			}
		}
	}
	 ajax.send(null)
}

Pero al agragar la linea que me valida el lenght del valor del campo, la página se me recarga completa. Sin actualizar AJAX
Extraño esto, por lo menos para mí