Función createElement y appendChild en Javascript

Uso: var elemento = document.createElement(tag);
Con éste método del objeto document crearíamos un nuevo elemento con un tag determinado. Ejemplo: var div = document.createElement('DIV');

Uso: elemento1.appendChild(elemento2);
Con este método añadiremos el elemento “elemento2” a “elemento1”. En el siguiente ejemplo, añadiremos elementos a una lista de forma dinámica:

<input type=”text” id=”texto” />
<input type=”button” value=”Crear” onclick=”crear()” />
<ul id=”lista”></ul>
<script type=”text/javascript”>
function crear() {
// Obtenemos el valor entrado en la caja de texto
var valor = document.getElementById(“texto”).value;
// Creamos un nuevo elemento LI
var li = document.createElement(“LI”);
// Añadimos el valor introducido al nuevo elemento
li.innerHTML = valor;
// Añadimos el elemento LI a la lista UL
var ul = document.getElementById(“UL”);
ul.appendChild(li);
// Vaciamos la caja de texto
document.getElementById(“texto”).value = “”;
}
</script>
Función8: removeChild()
Uso: elemento.removeChild(hijo);
Este método es el usado para eliminar elementos. Se elimina el elemento hijo del objeto. Si queremos eliminar un objeto concreto, tendremos que hacerlo de la siguiente manera:

// Obtenemos el elemento
var el = document.getElementById(“elemento-a-eliminar”);
// Obtenemos el padre de dicho elemento
// con la propiedad “parentNode”
var padre = el.parentNode;
// Eliminamos el hijo (el) del elemento padre
padre.removeChild(el);

Usuarios que han visto este tema también han visto...

- Pasando datos entre paginas con JavaScript
- Tres en raya gráfico en Javascript
- Las funciones setInterval y setTimeout en JavaScript
- Mostrar descripción de link en la barra de estado
- Verificación del contenido de un formulario

- Versión imprimible de este documento

- Enviar por e-mail este documento