Как вставить новую строку/возврат каретки в element.textContent?

Как бы глупо это ни звучало, я так и не нашел подходящего ответа.

Допустим, я хочу динамически создать новый элемент DOM и заполнить его textContent/innerText со строковым литералом JS.
Строка такая длинная, что я хотел бы разделить ее на три части:

var h1 = document.createElement("h1");

h1.textContent = "This is a very long string and I would like to insert a carriage return HERE...
moreover, I would like to insert another carriage return HERE... 
so this text will display in a new line";

Проблема в том, что если я напишу

h1.textContent = "...I would like to insert a carriage return here... \n";

, это не сработает, вероятно, потому, что браузер считает '\n' чистым текстом и отображает это как таковое (\r тоже не работает).

С другой стороны, я мог бы изменить h1.innerHTML вместо textContent и написать:

h1.innerHTML = "...I would like to insert a carriage return here...<br />";

Здесь
сделает всю работу, но это заменит не только текстовое содержимое, но и весь HTML-код. содержимое моего h1, что не совсем то, что я хочу.

Есть ли простой способ решить мою проблему?
Я бы не стал прибегать к созданию нескольких блочных элементов только для того, чтобы текст располагался на разных строках.
Любая идея будет принята с благодарностью.
Заранее спасибо.

55
задан akjoshi 15 June 2012 в 08:13
поделиться