Bienvenidos sean a este post, en el post anterior hablamos sobre Element y hablamos de la existencia de innerHTML e insertAdjacementHTML que al ser utilizado permite al navegador analizar el documento y generar los objetos Element necesarios para representar los nuevos elementos, aunque esto es un procedimiento normal el objeto Document tambien nos provee algunos metodos para poder trabajar directamente con los objetos Element:
- createElement(nombre), crea un nuevo objeto Element del tipo especificado en nombre
- appendChild(elemento), inserta el elemento representado por el objeto Element como hijo de un elemento existente en el documento
- removeChild(elemento), elimina el elemento hijo de otro elemento, el atributo debe ser una referencia del hijo a eliminarse
Para poder agregar un nuevo elemento primero usaremos a createElement donde lo iniciara pero con appendChild lo agregaremos al elemento que informemos, para entender mejor el concepto usemos el siguiente ejemplo:
element.html
<html>
<script language="javascript">
<!--
document.title = "Objeto element";
var texto;
function agregarElemento()
{
texto = document.getElementById("texto");
var elemento = document.createElement("p");
elemento.innerHTML = "Texto agregado al elemento";
texto.appendChild(elemento);
}
//-->
</script>
<body>
<div id="texto">Texto de ejemplo</div>
<button type="button" onClick="agregarElemento()">Agregar elemento</button>
</body>
</html>En este caso primero hablaremos sobre el codigo HTML, donde tendremos un tag DIV llamado texto y luego un boton que llamara al metodo agregarElemento, hablemos sobre el codigo en el tag SCRIPT, en este caso tendremos una linea que agregara el titulo de la pagina, luego creara una variable llamada texto, luego vendra la funcion llamada agregarElemento, en este caso asignaremos el DIV texto a la variable texto, luego crearemos una variable llamada elemento y usaremos a document con el metodo createElement donde pasaremos el tipo de elemento, en este caso usamos a un elemento de tipo parrafo (< p >), luego usaremos a innerHTML para agregar un texto dentro del elemento creado, el estado actual de elemento es el siguiente:
<p>Texto agregado al elemento</p>En nuestra siguiente linea agregaremos el elemento creado a texto, con esto agregaremos un nuevo elemento dentro de nuestro DIV texto, probemos el programa para obtener la siguiente salida
En este caso podemos ver como se agrego el elemento a nuestro DIV sin mayores inconvenientes, recuerden que primero se crea el nuevo elemento, luego por medio de innerHTML pudimos agregar un texto dentro de este elemento y por ultimo por medio de appendChild() pudimos agregarlo al DIV.
En resumen, hoy hemos visto como crear un objeto Element, los metodos disponibles, como son los pasos necesarios para agregarlo, un ejemplo donde lo pusimos en practica, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Tengo un Patreon donde podes acceder de manera exclusiva a material para este blog antes de ser publicado, sigue los pasos del link para saber como.
Tambien podes donar
Es para mantenimiento del sitio, gracias!
$1.50
El blog de Tinchicus 