Hola
sigo con mis avances básicos en JavaScript y HTML5.
Tengo una duda y a ver si alguien sabe como se haría lo siguiente.
Dejo a continuación el código de mi prueba. El asunto es que me gustaría que en mi prueba al hacer clic sobre mi H1 desapareciera el div creado y como veis en el código si funciona, la duda es si se podría hacer desaparecer solo una parte de esta div, en este caso sólo lo contenido en la etiqueta <p>. Es decir, mantener H2 pero eliminar el texto contenido en <p>
Muchas gracias por vuestra ayuda.
Código:
<!DOCTYPE HTML>
<html>
<head>
<title>Comentarios en un blog</title>
<style type="text/css">
.comentario {
font-family: "Verdana", sans-serif;
font-size: 13px;
}
#leermas {
color: blue;
}
</style>
<script type="text/javascript">
<!--
function masdiv()
{
var nuevo_div=document.createElement("div");
var nuevo_h2=document.createElement("h2");
var nuevo_texto_h2=document.createTextNode("Comentario");
var nuevo_p=document.createElement("p");
var nuevo_texto_p=document.createTextNode("Texto del comentario");
nuevo_p.setAttribute("class", "Comentario");
nuevo_div.appendChild(nuevo_h2);
nuevo_h2.appendChild(nuevo_texto_h2);
nuevo_div.appendChild(nuevo_p);
nuevo_p.appendChild(nuevo_texto_p);
document.body.appendChild(nuevo_div);
return true;
}
function menosdiv()
{
if(masdiv = true)
{
nuevo_texto_p.setAttribute("style", "color: green");
}
else
{return false;}
}
//-->
</script>
</head>
<body>
<h1><a href "#" onClick="menosdiv();">Título de mi post</a></h1>
<div>
<h2>Comentarios</h2>
<p class="comentario">Texto de los comentarios</p>
</div>
<p><a id="leermas" href="#" onClick="masdiv(); return false">Leer más comentarios</a></p>
</body>
</html>