Insertar nueva línea (\ n) con innerHTML en pre elemento en IE no funciona?

Me enfrenta el siguiente problema: Tengo un documento HTML donde quiero imprimir mensajes básicos de estado/depuración/etc.Insertar nueva línea ( n) con innerHTML en pre elemento en IE no funciona?

Así, el documento HTML contiene un pre-elemento vacío cuyo ID es cabo:

<body onload='init() && main();'> 

<pre id='out'> 
</pre> 

</body> 
</html>

La función init() asigna el elemento previo a una variable:

var out_div; 

    function init() { 
     out_div = document.getElementById('out') 
     return 1; 
    }

Entonces , para imprimir algo en el pre-div, uso esta función:

function txt_out(txt) { 
     out_div.innerHTML += "\n" + txt 
    }

La nueva línea debe asegurarse de que cada invocación de txt_out se escriba en su propia línea. Esto funciona como se esperaba en Firefox. IE, sin embargo, no parece prestar atención al \ n. Entonces, ¿esto está mal por parte de IE, o estoy haciendo algo mal?

Fuente

2009-11-25 René Nyffenegger

simplemente
EAK que – Amarghosh

Sí que es un error por parte de IE. IE elimina los espacios en blanco al configurar innerHTML: http://bytes.inso.cc/wp/2009/11/07/internet-explorer-strips-leading-whitespaces-in-text-nodes/ Las bibliotecas pueden ayudar a aliviar esto (jQuery I sabe hacer con su método '.html()'). –

En caso de duda, IE está equivocado. –

Ésta es una known problem en Internet Explorer. Como solución temporal, inserte un elemento <br> en lugar de un carácter de nueva línea.

Fuente

2009-11-25 15:59:04

Exactamente. Buen enlace. –

@BalusC - los elementos previos no ** contienen ** CDATA, y br no está en la lista de elementos secundarios excluidos (http://www.w3.org/TR/html4/struct/text.html#h-9.3 .4). ¿Por qué crees que un elemento br no funcionará? – Quentin

cambiar el código para:

function txt_out(txt) { 
     out_div.innerHTML += "<br />" + txt 
    }

Fuente

2009-11-25 15:58:47

Cambio a <br />

Fuente

2009-11-25 15:58:50

Hacer cosas como element.innerHtml += something; suele ser una mala práctica porque hace que el navegador vuelva a analizar todo el contenido del elemento. A medida que agrega más y más datos, cada vez se vuelve más y más lento. También invalida cualquier referencia/evento oyentes que otras piezas de código puedan tener en sus subelementos.

Es mejor utilizar una etiqueta div; algo así como:

<div id='out'></div>

y luego añadir nuevos sub-elementos sobre la marcha:

out_div = document.getElementById('out'); 

// add a new message 
new_element = document.createElement('div'); 
new_element.textContent = "your message here"; 
new_element.className = "some_class"; // CSS class for changing the appearance 
out_div.appendChild(new_element);

Fuente

2009-11-25 15:59:10 intgr

¡Uy! Se corrigieron los errores de JavaScript en mi respuesta. – intgr

Insertar nueva línea (\ n) con innerHTML en pre elemento en IE no funciona?

Respuesta

Cuestiones relacionadas