Poner <input type="text" en diferentes partes al pulsar un botón

[scorm]

Mira te enseño lo que llevo hasta ahora, mi principal problema hasta ahora (y gracias a tu código he llegado hasta aquí) es que si creo hijos e hijos de hijos (en una primera tanda) se crean bien, pero al intentar crear un nuevo hijo del primer padre, no me lo muestra el último, como debería ser... te enseño el código. Ahora funciona de la siguiente manera, cada vez que le doy a 'capitulo' si el foco está en un input le crea un hijo, si no está posicinado en ningún input no hace nada.

Código:

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 anteriorMargin = parseInt(foco.parentNode.style.marginLeft) || 0;
		copia.style.marginLeft = (anteriorMargin+2) +"em";
		insertAfter(copia, foco.parentNode);
		
		 //fi.appendChild(copia);
    	
	}
	foco=0;
}

<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'"/>
    <button type="button" name="div" onclick="borrar(this.parentNode)">borrar</button>
</div>

Lo de usar listas (que según tú es más sencillo) es que no sé a qué te refieres, porque llevo poco usando javascript y nunca lo he usado... ¿debería usarlas en vez de ésto?.

Muchas gracias de nuevo :))