Yo lo probré con este código:
<!DOCTYPE html>
<!--
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#selectOperation>div{
vertical-align: middle;
border: 1px solid #99CCFF;
display: inline-block;
margin: 5px;
min-height: 30px;
min-width: 75px;
padding:2px;
padding-top: 4px;
vertical-align: middle;
cursor: pointer;
}
#selectOperation>div:hover{
box-shadow: -1px 0 10px #99CCFF;
}
#domNodes{
border:1px solid yellow;
}
#domNodes h3{
text-align: center;
}
#domNodes>div{
border:1px solid yellow;
margin: 5px;
min-height: 50px;
width: 75px;
display:inline-block;
vertical-align: top;
}
#domNodes> span{
border:1px solid red;
margin: 5px;
min-height: 30px;
min-width: 30px;
display:inline-block;
vertical-align: top;
}
#domNodes{
vertical-align: top;
}
.addDiv{
border-color: #F8AC00;
border-radius: 15%;
}
.addSpan{
border-color:#008000;
background-color: #ADFF2F;
}
.setContentPrev{
border-color:#FFCC99;
}
.delPrevNode{
border-color:#A9ED86;
}
.delNextNode{
border-color:#ADFF2F;
}
.addAttr {
border-color:red;
}
.delAllType{
border-color:#9966FF;
}
.replaceMeForFirst {
background-color: sandybrown;
}
</style>
<script>
function addDiv() {
var nodoPadre = document.getElementById("domNodes");
var newDiv = document.createElement("div"); /*creo el div*/
newDiv.className = 'setContentPrev'; /*div de la clase 'setContentPrev' */
nodoPadre.appendChild(newDiv);
newDiv.addEventListener("click", addText, false); /*añado un evento para que al clicar sobre el div se ejecute la funcion*/
function addText(evento) {
var miDiv = evento.target; /*utilizo evento target para acceder al elemento que ha ejecutado la funcion*/
var divAnterior = miDiv.previousSibling;
if(miDiv.previousElementSibling){
var newTexto = prompt("introduzca un texto");
divAnterior.innerHTML = newTexto;
} else {
alert('No extiste div hermano anterior');
}
}
}
</script>
</head>
<body>
<article class="article_main_web">
<header class="header_article">
<hgroup>
<h2>DOM!!</h2>
</hgroup>
</header>
<nav id="selectOperation">
<div id="addDiv" onclick = "addDiv()"> NEW ADD DIV </div>
<div id="addSpan"> NEW ADD SPAN </div>
<div id="setContentPrev"> NEW DIV SET CONTENT PREVIOUS ELEMENT </div>
<div id="delPrevNode"> NEW DIV DELETE PREVIOUS ELEMENT </div>
<div id="delNextNode"> NEW DIV DELETE NEXT ELEMENT </div>
<div id="addAttr"> NEW DIV SET ATTRIBUTE</div>
<div id="delAllType"> NEW DIV REMOVE ALL TYPE </div>
<div id="replaceMeForFirst"> NEW DIV REPLACE ME </div>
</nav>
<h3>!!ADD DIVS !!</h3>
<section id="domNodes">
</section>
</article>
</body>
</html>
Al pulsar en "
NEW ADD DIV" crea un nuevo elemento "
div" dentro del elemento "section",
si ahora pulsas sobre el nuevo "
div" creado, saltará un "
alert" diciendo que "
No existe div hermano anterior", así que vuelve a pulsar en "
NEW ADD DIV" para crear otro nuevo "
div" a continuación del que creamos anteriormente, y ahora al pulsar en este último "
div", si nos pedirá que ingresemos un texto, que posteriormente lo incluirá en el "
div" anterior.
Vaya lío.
Esta línea es la que comprueba si existe un elemento hermano anterior:
if(miDiv.previousElementSibling){Espero haberme explicado bien.
Tema: JavaScript. Duda ejercicio crear nodos DOM. Añadir div a un documento HTML (Leído 8956 veces)
RSS -
WAP2