Al pasar HTML mediante .innerHTML no se queda el texto

[GeekGirl]

Y cuando ejecutás esa función? En el onclick del botón? Probablemente lo que pasa es que se muestra el div unas milésimas de segundo hasta que se envía el formulario (se refresca la página y tu código insertado del lado del cliente desaparece).
Acaso en la url te aparece un # cuando desaparece tu div? Si es así, es que no estás deteniendo el envío del formulario frente al error. Te aconsejo lo siguiente:

Código Javascript:

document.getElementById('idDeTuForm').onsubmit = function()
{
return false; // Detenes el envío del formulario
 
var DNI='';
var NOMBRE='';
var APELLIDOS='';
 
if (document.getElementById("dni").value == '')
{ 
DNI = ("El campo DNI no puede ser vacio");
}
if (document.getElementById("nombre").value == '')
{
NOMBRE = ("El campo nombre no puede ser vacio");
}
if (document.getElementById("apellidos").value == '')
{
APELLIDOS = ("El campo apellidos no puede ser vacio");
}
 
alert(DNI+'\n'+APELLIDOS+'\n'+NOMBRE);
 
var capa = document.getElementById('div_capa');
capa.innerHTML = DNI+ '<br>' +APELLIDOS+ '<br>'+NOMBRE;
capa.style.border = '1px solid red';
 
// Solo si los 3 valores estan completos permitis el envio del mismo
 
if(document.getElementById("dni").value != '' && document.getElementById("nombre").value != '' &&
document.getElementById("apellidos").value != '') {
    return true;
}
}
 

Aclaro que el código está hecho a las apuradas y por supuesto se puede optimizar mucho. Es solamente para darte una idea de cuál es el error.
Saludos :)