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: bermartinv en 03 de Febrero 2016, 16:00

Título: JavaScript manipular el DOM getElementById createElement appendChild CU01140E
Publicado por: bermartinv en 03 de Febrero 2016, 16:00
Adjunto mi código respuesta al ejercicio CU01140E del curso de JavaScript:

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
#cuadrado{
    border:solid thin blue;
    width:300px;
    height:300px;
    margin-left:50px;
    margin-top:10px;
   
}
   
#botones{
    left:100px;
    margin: 30px;
}

input{
    text-align:center;
    margin:10px ;
}
</style>
<script>
var contador =1;   
   
    function anyadir(donde){
    var nodocuadrado=document.getElementById("cuadrado");
    var nodobody=document.body;
    var nodohijo=document.createElement("span");
    nodohijo.style.color="green";
    nodohijo.id="elemento"+(contador+1);
    nodohijo.innerHTML="Nodo creado "+contador+ "<br/>";
    if (donde=="caja"){
        nodocuadrado.appendChild(nodohijo);
        contador++       
    }
    else {
    nodobody.appendChild(nodohijo);
    contador++;   
    }
    }
</script>
</head>
<body>
    <div id="cuadrado">
        <p>Curso JavaScript aprenderaprogramar.com</p>   
    </div>
    <div id="botones">
        <input type="button" value="Añadir fila" onclick="anyadir('caja')" />
        <input type="button" value="Anidar" onclick="anyadir('fuera')" />
    </div>
</body>
</html>
Título: Re:JavaScript manipular el DOM getElementById createElement appendChild CU01140E
Publicado por: Ogramar en 05 de Febrero 2016, 08:41
Buenas bermartinv

El ejercicio pedía Cuando se pulse el botón “Añadir al final”, debe añadirse un div al final de la página

pero no has añadido div sino span o eso creo

Salu2
Título: Re:JavaScript manipular el DOM getElementById createElement appendChild CU01140E
Publicado por: bermartinv en 08 de Febrero 2016, 00:55
Si ogramar, tienes razón. A veces, pruebo caso después de hacer el ejercicio y se me olvida volver atrás. Solo hay que cambiar : createElement('div') y eliminar el código html que había añadido para hacer el salto de linea.

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
#cuadrado{
    border:solid thin blue;
    width:300px;
    height:300px;
    margin-left:50px;
    margin-top:10px;
   
}
   
#botones{
    left:100px;
    margin: 30px;
}

input{
    text-align:center;
    margin:10px ;
}
</style>
<script>
var contador =1;   
   
    function anyadir(donde){
    var nodocuadrado=document.getElementById("cuadrado");
    var nodobody=document.body;
    var nodohijo=document.createElement("div");
    nodohijo.style.color="green";
    nodohijo.id="elemento"+(contador+1);
    nodohijo.innerHTML="Nodo creado "+contador;
    if (donde=="caja"){
        nodocuadrado.appendChild(nodohijo);
        contador++       
    }
    else {
    nodobody.appendChild(nodohijo);
    contador++;   
    }
    }
</script>
</head>
<body>
    <div id="cuadrado">
        <p>Curso JavaScript aprenderaprogramar.com</p>   
    </div>
    <div id="botones">
        <input type="button" value="Añadir fila" onclick="anyadir('caja')" />
        <input type="button" value="Anidar" onclick="anyadir('fuera')" />
    </div>
</body>
</html

Gracias y saludos.