Вставка новой строки в предварительный тег (IE, Javascript)

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

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

Эти отчет об ошибке quirksmode.org и комментарии о внутреннем HTML-поведении Internet Explorer могут помочь:

«IE применяет Нормализация HTML к данным, назначенным свойству innerHTML. Это вызывает неправильное отображение пробелов в элементах, которые должны сохранять форматирование, таких как <pre> и <textarea>.»

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

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

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

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

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

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

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

Я считаю это.

Я обнаружил, что 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]);
        }

Удачи!

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

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

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

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

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

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

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

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

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

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

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