Foros aprenderaprogramar.com

Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: DRANXZ88 en 16 de Abril 2021, 20:31

Título: JavaScript createElement, createTextNode, appendChild cambios dinámicos CU01140E
Publicado por: DRANXZ88 en 16 de Abril 2021, 20:31
Propuesta de solución para el ejercicio CU01140E del tutorial básico de programación web con JavaScript de aprenderaprogramar.

Ejercicios resueltos


HTML

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript</title>
    <link rel="stylesheet" href="css/estilos.css">
</head>

<body>
    <div>
        Curso JavaScript aprenderaprogramar.com
    </div><br>
    <button class="boton" onclick="procesar('body');">Añadir al final</button>
    <button class="boton" onclick="procesar('div')">Anidar</button><br>
    <script src="js/funciones.js"></script>
</body>
</html>

CSS archivo estilos.css

Código: [Seleccionar]
body {
  font-family: sans-serif;
  text-align: center;
}
div {
  border-style: solid;
  margin: 20px;
  padding: 15px;
  display: inline-block;
}
.boton{
    background-color: cadetblue;
    width: 150px;
    height: 40px;
    color: white;
    font-weight: bolder;
    border-radius: 15%;
    cursor: pointer; 
}

JavaScipt archivo funciones.js

Código: [Seleccionar]
var contador = 1;
function procesar(valor) {
  var nodoHijo = document.createElement("div");
  var nodoText = document.createTextNode("Nodo Creado " + contador);
  var nodoPadre = document.getElementsByTagName(valor);
  nodoPadre[0].appendChild(nodoHijo);
  nodoHijo.appendChild(nodoText);
  contador++;
}
Título: Re: JavaScript createElement, createTextNode, appendChild cambios dinámicos CU01140E
Publicado por: Ogramar en 11 de Enero 2022, 20:02
Buenas, para quien revise este código, está correctamente resuelto y cumple con lo que pedía el ejercicio. Pueden consultarse algunos comentarios en https://aprenderaprogramar.com/foros/index.php?topic=3926.0 Salu2