Algunos lo llaman magia: la capacidad de hacer que los objetos aparezcan repentinamente de la nada. Puede crear este tipo de magia en su sitio web utilizando unas pocas líneas de JavaScript. Los cuadros de texto, por ejemplo, son buenos elementos HTML para usar cuando se aprende a hacer que los objetos aparezcan dinámicamente. En lugar de incluirlos en su código al diseñar su página web, agregue cuadros de texto según sea necesario e impresione a los visitantes del sitio al mismo tiempo.
Creación de cuadro de texto
Antes de hacer que un cuadro de texto se materialice, debe comprender qué es un cuadro de texto. HTML lo conoce como una etiqueta de entrada como se muestra en el siguiente ejemplo:
Esta etiqueta de entrada crea un cuadro de texto que tiene dos atributos importantes; id y tipo. El atributo de tipo, cuyo valor es "texto", le dice a los navegadores que creen un cuadro de texto en lugar de otro tipo de control, como un botón. El atributo id, que es opcional, puede resultar útil si necesita manipular el cuadro de texto más adelante. La opción de valor, que también es opcional, contiene el valor que le gustaría ver en el cuadro de texto cuando se abre la página web.
Cuadros de texto dinámicos
A HTML no le importa cuando define los atributos de un elemento siempre que les dé valores en alguna parte. Esto significa que tiene la capacidad de crear un elemento de cuadro de texto de forma dinámica y establecer sus atributos cuando lo desee. La función document.createElement lo hace posible como se muestra a continuación:
var box = document.createElement ("entrada");
Eso es todo lo que se necesita para crear un elemento de entrada HTML y asignarlo a una variable llamada "cuadro". El objeto de cuadro no se convierte en un cuadro de texto hasta que le da a su atributo de tipo un valor de "texto" como se muestra en este ejemplo:
box.type = "texto";
Integración de páginas web
Este código a continuación agrega el cuadro de texto al documento HTML utilizando la útil función appendChild:
document.body.appendChild (caja);
Si desea agregar el cuadro de texto después de un control específico, use la siguiente declaración en su lugar:
document.getElementById ("algún_ID_Elemento"). appendChild (cuadro);
Reemplace "some_Element_ID" con el nombre del elemento después del cual le gustaría agregar el cuadro de texto. Por ejemplo, si ese elemento fuera un botón cuyo ID fuera "button1", la instrucción appendChild aparecería de la siguiente manera:
document.getElementById ("botón1"). appendChild (cuadro);
Atributos opcionales
Su nuevo cuadro de texto funcionará perfectamente con este código. Simplemente cree una función de JavaScript que contenga la declaración y llámela siempre que necesite un cuadro de texto. Sin embargo, también puede establecer el valor del cuadro de texto y los atributos de ID de la siguiente manera:
box.value = boxValue; box.id = boxID;
Pasa los valores de boxValue y boxID a la función, y aplica esos atributos al cuadro de texto. Si asigna un valor de ID, puede usarlo más tarde para actualizar las propiedades del cuadro de texto como se muestra en el siguiente ejemplo:
var boxObject = document.getElementById (boxID); boxObject.style.backgroundColor = "rojo";
La primera declaración obtiene una referencia al cuadro de texto y la última declaración cambia el color de fondo del cuadro de texto a rojo.