Вставка новой строки в тег pre (IE, Javascript)

Эти отчеты об ошибках и комментарии quirksmode.org о поведении innerHTML Internet Explorer может помочь:

"IE применяет нормализацию HTML к данным, назначенным свойству innerHTML. Это приводит к неправильному отображению пробелов в элементах, которые должны сохранять форматирование, таких как ‹pre› и ‹textarea›. "

Это работает в IE?

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

Я протестировал его с Firefox, и он работает. :-)

Обходной путь можно найти на странице, на которую есть ссылка в принятом ответе. Для удобства использования вот оно:

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

<br/> должен выводить только одну строку во всех браузерах. Конечно, удалите \n, код должен быть:

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

Содержимое внутри тега <pre> не должно считаться HTML.

На самом деле смысл тега <pre> в том, что он отображает форматированный текст.

Использование свойства innerText — правильный способ изменить содержимое тега <pre>.

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

IE9 не нормализует белый цвет пробелы, в отличие от своих предшественников.

Вы должны тестировать поддержку, а не ориентироваться на какой-то конкретный браузер. Например...

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.
}

Я считаю это.

Я обнаружил, что IE использует \r\n, а Fx (другие) использует \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));

Для плагина TinyMCE (редактор wysiwyg), который я однажды сделал, я использовал режим редактирования BR i и очистил его при отправке и т. Д.

Этот код перебирает все элементы BR внутри элементов PRE и заменяет BR символами новой строки.

Обратите внимание, что код основан на TinyMCE API, но его легко написать с помощью стандартного Javascript.

Очистить:

        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]);
        }

Удачи!

Если вы не хотите использовать externalHTML, вы также можете сделать следующее для IE, если дополнительный тег pre не является проблемой:

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

Я обнаружил, что innerHTML обрабатывается до того, как он применяется к элементу, поэтому ‹br› становится новой строкой, а несколько пробелов удаляются.

Чтобы сохранить необработанный текст, вы должны использовать, например, nodeValue;

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

Вот очень небольшая поправка к ответу Эдварда Уайльда, которая сохраняет атрибуты тега ‹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;
}

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

это сработало для меня.