textarea salto de linea

[Blashak]

Buenas

Tengo un textarea que recojo el valor en javascrip y lo inserto en la web.
despues de estar varios dias y buscar info no encontre ninguna solucion para poder hacerlo.
a ver si alguien me puede ayudar.

mi codigo.

Código Javascript:

var contenidos = document.createElement("div");
var parrafo = document.createElement("p");
var br = document.createElement("br");
 
var id = "conte"
contenidos.setAttribute("id",id);
 
contenidos.style.fontSize="14px";
contenidos.style.color = "red";
contenidos.style.width="200px";
contenidos.style.marginTop="10px";
contenidos.style.textAlign="center";
contenidos.setAttribute("id","contenido");
 
 
var mensaje_sp = contenido.split("\n");
total_sp = mensaje_sp.length;
texto = new Array();
for(o=0; o<total_sp; o++){
 
    texto[o] = document.createTextNode(mensaje_sp[o]);          
    
    parrafo.appendChild(texto[o]);
    parrafo.appendChild(br);                
                    
                    
}
contenidos.appendChild(parrafo);
document.body.appendChild(contenidos);
 

haciendo esto el texto me sale todo junto.no entiendo porque si le estoy poniendo un br por cada palabra que separa

saludos