JavaScript es muy poderoso y con él podemos crear contenido web dinámico y agregar muchas funciones a una aplicación web. Con HTML creamos la estructura de la página web y lo mismo también se puede hacer con JavaScript.
Hay algunos métodos de JavaScript llamados createElement(), appendChild() con los que podemos agregar Nodes al árbol DOM sobre la marcha.
Ejemplo 1: crear un elemento div
Digamos que solo desea crear un elemento div, entonces para eso a continuación se encuentra el fragmento de código:
let div_element = document.createElement("div")
Ejemplo 2: agregar un Node secundario a un elemento HTML
Digamos que hay un div con ID «divele»
<div id="divele"></div>
Y desea agregar un elemento de párrafo dentro de div. A continuación se muestra el fragmento de código
Javascript
let div_elem = document.getElementById("divele")
let child_p_elem = document.createElement("p")
div_elem.appendChild(child_p_elem)
Este fragmento de código agrega un elemento de párrafo dentro de div con la ayuda del método appendChild().
Ejemplo 3: Eliminación de un Node secundario de un elemento HTML
Considere una lista desordenada que tiene 3 elementos de lista. Y desea eliminar el primer elemento secundario <li> en él.
HTML
<ul id="ulele"> <li>Food</li> <li>Milk</li> <li>Vegetable</li> </ul>
Usando el método removeChild(), podemos eliminar el primer hijo <li> de la lista desordenada:
Javascript
let ul_ele = document.getElementById("ulele")
// 0 represents the first child
ul_ele.removeChild(ul_ele.childNodes[0])
Ejemplo 4: Para acceder a todos los elementos secundarios de un elemento HTML principal
Ahora, para acceder a todos los elementos secundarios del div con id «divele», usaremos el método childNodes() que devolverá los Nodes secundarios requeridos.
Javascript
let div_ele = document.getElementById("divele")
// Returns an array of child nodes
// contained inside the parent node
let div_ele_childs = div_ele.childNodes
A continuación encontrará la instantánea de la página web simple que vamos a desarrollar.
Código completo:
HTML
<!DOCTYPE html>
<html lang="en">
<body>
<div id="divele">
</div>
<script type="text/javascript">
let parentDiv = document.getElementById("divele")
let heading = document.createElement("h1")
let unordered_list = document.createElement("ul")
unordered_list.setAttribute("id", "ulele")
heading.style.color = "green"
heading.textContent = "GeeksforGeeks"
parentDiv.appendChild(heading)
parentDiv.appendChild(unordered_list)
for (let i = 0; i < 4; i++) {
let li_elem = document.createElement("li")
unordered_list.appendChild(li_elem)
}
unordered_list.childNodes[0].textContent = "Java"
unordered_list.childNodes[1].textContent = "Python"
unordered_list.childNodes[2].textContent = "Javascript"
unordered_list.childNodes[3].textContent = "C#"
</script>
</body>
</html>
Producción:
