Ups, es cierto. No me había percatado de que los hijos no se crean al final de la lista de hijos. A ver cómo lo solventamos.
Tu ejemplo está bien, ya empieza a ser lo que debería ser.
Lo de usar listas me refería a usar etiquetas UL y LI, que es lo que necesitamos en este caso y intentamos esquivar con los DIVs.
El
onclick="foco=this" sería más lógico poner
onfocus="foco=this"; pero veo que nos va a dar problemas, así que mejor sacrificar esa parte.
Te propongo la modificación de que la caja que actualmente tiene el foco cuando pulsemos el botón para crear, mantenga el foco. Creo que es más intuitivo. Así podemos darle varias veces al botón directamente para crear más hijos.
Creo que podría ser así:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>Página nueva</title>
<style type="text/css">
</style>
</head>
<body>
<div>
<div align="center">
<input type="button" value="capitulo" name="capitulo" onclick="seleccionados()"/>
</div>
</div>
<div>
<div id="fiel" align='left' >
<input type="text" name="cap3" onclick="foco=this" style="background-color: #eeeeee" onfocus="this.style.backgroundColor = '#cccccc'" onblur="this.style.backgroundColor = '#eeeeee'"/>
</div>
</div>
<div id="modulo" style="display:none">
<input type="text" name="cap" onclick="foco=this" style="background-color: #eeeeee" onfocus="this.style.backgroundColor = '#cccccc'" onblur="this.style.backgroundColor = '#eeeeee'" value="" />
<button type="button" name="div" onclick="borrar(this.parentNode)">borrar</button>
</div>
<script type="text/javascript">
<!--
function insertAfter(node, referenceNode) {
referenceNode.parentNode.insertBefore(node, referenceNode.nextSibling);
}
var foco=0;
function seleccionados(){
if(foco!=0){
var fi = document.getElementById('fiel'); // 1
var copia = document.getElementById("modulo").cloneNode(true);
copia.style.display = "block";
var nuevoMargen, anteriorMargin = parseInt(foco.parentNode.style.marginLeft) || 0;
copia.style.marginLeft = (nuevoMargen=anteriorMargin+2) +"em";
// tendremos que recorrer todos los hermanos siguientes (nextSibling) que tengan como margen nuevoMargen (o más) para saber dónde está el último "hijo". Éste es el problema de no hacerlo con listas, que tenemos que hallar manualmente la jerarquía
var despuesDe = foco.parentNode;
while( (despuesDe.nextSibling) && (parseInt(despuesDe.nextSibling.style.marginLeft) || 0) >= nuevoMargen )
despuesDe = despuesDe.nextSibling;
insertAfter(copia, despuesDe);
//fi.appendChild(copia);
foco.focus(); // le devolvemos el foco tras pulsar el botón
}
//foco=0;
}
// -->
</script>
</body>
</html>
Esto evoluciona.
Saludos.