llamar - Insertar una nueva línea en una etiqueta previa(IE, Javascript)

llamar javascript desde html

Question

En IE cuando inserto texto en una etiqueta <pre> las nuevas líneas son ignoradas:

<pre id="putItHere"></pre>

<script>
function putText() {
   document.getElementById("putItHere").innerHTML = "first line/nsecond line";
}
</script>

Usar /r/n lugar de un plain /n no funciona.

<br/> funciona, pero inserta una línea en blanco adicional en FF, lo cual no es aceptable para mis propósitos.

Answer 1

La solución alternativa se puede encontrar en la página vinculada en la respuesta aceptada. Para facilidad de uso, aquí está:

if (elem.tagName == "PRE" && "outerHTML" in elem)
{
    elem.outerHTML = "<PRE>" + str + "</PRE>";
}
else
{
    elem.innerHTML = str;
}

Answer 2

Creo que esto.

Lo que encontré fue que IE está usando / r / n y Fx (otros) está usando / n

var newline;
if ( document.all ) newline = ''/r/n'';
else newline = ''/n'';

var data = ''firstline'' + newline + ''second line'';
document.getElementById("putItHere").appendChild(document.createTextNode(data));

Para un plugin de TinyMCE (editor wysiwyg) una vez hice que terminé usando el modo de edición BR i y lo limpié en el envío, etc.

Este código recorre todos los elementos BR dentro de los elementos PRE y reemplaza BR con líneas nuevas.

Tenga en cuenta que el código se basa en la API de TinyMCE, pero puede escribirse fácilmente utilizando Javascript estándar.

Limpiar:

        var br = ed.dom.select(''pre br'');
        for (var i = 0; i < br.length; i++) {
          var nlChar;
          if (tinymce.isIE)
            nlChar = ''/r/n'';
          else
            nlChar = ''/n'';

          var nl = ed.getDoc().createTextNode(nlChar);
          ed.dom.insertAfter(nl, br[i]);
          ed.dom.remove(br[i]);
        }

¡Buena suerte!

Answer 3

El contenido dentro de la etiqueta <pre> no debe considerarse HTML.

De hecho, el punto de <pre> etiqueta <pre> es que muestra texto formateado.

El uso de la propiedad innerText es la forma correcta de modificar el contenido de una etiqueta <pre> .

document.getElementById("putItHere").innerText = "first line/nsecond line";

Answer 4

Este informe de errores de quirksmode.org y comentarios sobre el comportamiento innerHTML de Internet Explorer podrían ayudar:

" IE aplica la normalización de HTML a los datos que están asignados a la propiedad innerHTML. Esto ocasiona una visualización incorrecta de espacios en blanco en elementos que deben preservar el formato, como <pre> y <textarea> " .

Answer 5

Funciona esto en IE?

document.getElementById("putItHere")
    .appendChild(document.createTextNode("first line/nsecond line"));

Lo probé con Firefox y funciona. :-)

Answer 6

<br/> shoud solo muestra una línea en todos los navegadores. Por supuesto, elimine / n también, el código debería ser:

document.getElementById("putItHere").innerHTML = "first line<br/>second line";

Answer 7

if (typeof div2.innerText == ''undefined'')
    div2.innerHTML = value;
else
    div2.innerText = value;

eso funcionó para mí.

Answer 8

Si no desea usar outerHTML, también puede hacer lo siguiente para IE, si una etiqueta previa adicional no es un problema:

 if(isIE)
     document.getElementById("putItHere").innerHTML = "<pre>" + content+"</pre>";
 else
     document.getElementById("putItHere").innerHTML = content;

Answer 9

IE9 no normaliza los espacios en blanco , a diferencia de sus predecesores.

Debe probar el soporte en lugar de dirigirse a un navegador específico. P.ej..

var t = document.createElement(elem.tagName);
t.innerHTML = "/n";

if( t.innerHTML === "/n" ){
    elem.innerHTML = str;
}
else if("outerHTML" in elem)
{
    elem.outerHTML = "<"+elem.tagName+">" + str + "</"+elem.tagName+">";
}
else {
    // fallback of your choice, probably do the first one.
}

Answer 10

He descubierto que innerHTML se procesa antes de que se aplique al elemento, por lo tanto, <br> se convierte en una nueva línea y se eliminan varios espacios en blanco.

Para conservar el texto sin formato, debe usar nodeValue, por ejemplo;

document.getElementById(''pre_id'').firstChild.nodeValue=''    white space /r/n ad new line'';

Answer 11

Aquí hay una pequeña modificación a la respuesta de Edward Wilde que conserva los atributos en la etiqueta <pre>.

if (elem.tagName == "PRE" && "outerHTML" in elem) {
    var outer = elem.outerHTML;
    elem.outerHTML = outer.substring(0, outer.indexOf(''>'') + 1) + str + "</PRE>";
}
else {
    elem.innerHTML = str;
}