Создание пирамиды звезд в JavaScript: document.write и '\n'

Быстрый ответ

Для осуществления переноса строки в HTML-контенте используйте <br>:

document.getElementById("container").innerHTML += "<br>";

Если же нужно вставить перенос строки в текстовых полях или текстовых областях, используйте специальный символ переноса строки '\n':

document.querySelector("textarea").value += "\n";

Контекст использования: "\n" против "<br>"

В предварительно отформатированных контекстах, таких как <pre>, текстовые полях или консольных логах, символ '\n' заменяется переносом строки. В HTML-контенте для создания новой строки грамотно использовать тег <br>.

Создание новых строк в DOM

Для манипуляций с DOM старайтесь избегать использование document.write, так как это может привести к удалению текущего контента. Взамен, воспользуйтесь следующими методами:

let newLine = document.createElement("br"); // создаем элемент с новой строкой
document.body.appendChild(newLine); // добавляем элемент в тело документа

Для добавления нескольких строк рекомендуется использование цикла:

let content = document.getElementById("content");
for (let i = 0; i < 3; i++) {
  content.appendChild(document.createElement("br"));
}

Использование новых строк и CSS: Идеальное сочетание

С помощью CSS вы можете воспользоваться свойством white-space: pre;, которое сохранит пробелы и переносы строк в HTML. Такое действие позволит отобразить '\n' в виде переноса строки:

preformatted {
  white-space: pre;
}

Визуализация

Представьте себе механизм печатной машинки, где нажатие на кнопку 'Enter' перемещает каретку и прокручивает бумагу, благодаря чему возможна печать с новой строки.

JavaScript-печатная машинка:
document.write('Дорогой дневник,');
document.write('<br>'); // Нажали Enter!
document.write('Сегодня был выдающийся день!');

В результате получаем:

Дорогой дневник,
Сегодня был выдающийся день!

Таково действие <br> — это 'Enter' для вашего электронного дневника.

Использование переводов строк в циклах для эффекта “вау”!

Циклы с символом новой строки '\n' отлично подходят для создания текстовых узоров, например пирамиды из звёздочек.

let pyramid = "";
for(let i = 1; i <= 5; i++){
  pyramid += "*".repeat(i) + '\n';
}
console.log(pyramid);

Такой подход позволяет создать небольшую пирамиду в теге <pre> или сразу же в консоли.

"document.write"? Нет, спасибо. У нас есть что-то получше!

В современных веб-приложениях использование document.write считается неприемлемым. Вместо этого лучше воспользоваться:

• Node.textContent для добавления текста без риска исполнения HTML-тегов.
• Element.innerHTML для вставки HTML.

Используем <p>

Часто для структурирования контента используется тег <p>, который обеспечивает чёткую разметку и распределяет пространство между текстовыми блоками.

Работа с пробелами с использованием контейнеров вывода

В контейнерах вывода, таких как div и pre, символ '\n' правильно интерпретирует переносы строк при использовании свойства white-space со значением pre или pre-wrap:

let outputContainer = document.getElementById('output');
outputContainer.style.whiteSpace = 'pre'; // Заставим браузер верно отображать пробелы!
outputContainer.textContent += 'Первая строка.\nВторая строка.';

Полезные материалы

1. Document Object Model (DOM) – Web APIs | MDN — главное пособие для знакомства с веб-разработкой и работой с DOM.
2. Вывод данных в JavaScript — информация о выводе данных в JavaScript, включая создание новых строк.
3. Как заменить все переводы строк в строке элементами <br />? на Stack Overflow — подсказки по вставке переводов строки в JavaScript.
4. HTML-тег br — краткий обзор использования тега <br /> для создания новых строк в HTML.
5. Свойство Element: innerHTML – Web APIs | MDN — подробное руководство по применению innerHTML для работы с HTML-контентом.
6. Изменение документа — полное руководство по динамическому изменению документа с использованием JavaScript.
7. Метод Node: appendChild() – Web APIs | MDN — детальное описание метода appendChild() для добавления узлов, включая текстовые узлы для новых строк.