Propuesta de solución para el ejercicio CU01140E del tutorial básico de programación web con JavaScript de aprenderaprogramar.
Ejercicios resueltos
HTML
<!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
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
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++;
}
Tema: JavaScript createElement, createTextNode, appendChild cambios dinámicos CU01140E (Leído 2029 veces)
RSS -
WAP2