Как вывести html в .innerHTML с переносами?

Question

[Nik Faraday]

Здравствуйте!

Нужно вывести блок html внутрь другого блока, вот пример кода:

let appendEventBlock = "<a href=" + eventDetailsUlr + " style='font-size: 16px; color: blue'>" + scheduledDate + "</a>\n" + 
                    "<br />\n" +
                    "<span>@localizator["Executor"]: " + event.executor.firstName + " " + event.executor.lastName + "</span>\n" +
                    "<span class='text-muted text-break'>@localizator["Note"]: " + event.note + "</span>\n";

                document.getElementById(appendEventContainer).innerHTML += appendEventBlock;

Но у меня всё выводится в одну строчку. Как это можно решить?
и \n не работает, одинарные и двойные кавычки менял местами, тоже не помогает

Answer 1

[Евгений Палыч]

По идеи должно сработать в обратных кавычках`

let appendEventBlock = `
    <a href="${eventDetailsUlr}" style="font-size: 16px; color: blue">${scheduledDate}</a>
    <br />
    <span>@localizator["Executor"]: ${event.executor.firstName} ${event.executor.lastName}</span>
    <span class="text-muted text-break">@localizator["Note"]: ${event.note}</span>
`;
document.getElementById(appendEventContainer).innerHTML += appendEventBlock;

Comments

[Nik Faraday]

Евгений Палыч , к сожалению, тоже не работает, всё выводится в одну строчку. Ниже прикреплю скрины

[Nik Faraday]

Евгений Палыч, вот как выводится в строчку:


Вот как должно выводиться:


Всё равно, спасибо за помощь

[Nik Faraday]

Евгений Палыч на дату не обращайте внимание, я позже ею займусь

[Евгений Палыч]

Nik Faraday, Из-за:

\n не работает, одинарные и двойные кавычки менял местами, тоже не помогает

Вопрос понял так: Вас мучает внешний вид html при его генерации (именно код страницы - для красоты), а не вид страницы что видит пользователь.
Самое простое использовать <br> как предлагали. Понимаю что с CSS стилями даже не знакомы?! Так-же можно использовать div, table - полно видео по html элементам

[Евгений Палыч]

Nik Faraday, На скрине, где выводится ваша "в одну строку", выше видно что есть уже готовые элементы, посмотрите как они сделаны. Можно даже их/его клонировать, а после изменить содержимое. Смотри в поиске "js изменение документа"

[Nik Faraday]

Евгений Палыч,

выше видно что есть уже готовые элементы, посмотрите как они сделаны

Так и сделал изначально, потом пробовал с БР и со \n, потом написал сюда )

Answer 2

[humoured]

\n не работает

Нужно вставлять <br>.

Comments

[ThunderCat]

во первых для разметки это не сработает, во вторых у ТС есть бр.

[humoured]

у ТС есть бр

Один бр на четыре \n.

во первых для разметки это не сработает

То есть тот бр, который есть, сработает, а новый — нет?

[Nik Faraday]

humoured я написал, просто оно вставилось как разметка, бр тоже не работает. Там возле \n где я писал, есть ещё "и", перед ним стоял БР )))

[ThunderCat]

humoured, бр создает перенос блока в размеченном хтмл, то есть будет отображаться перенос в браузере. \n переносит строки разметки, но не делает пробелов/переносов для отображения в браузере(то есть это чисто для людей пишущих/читающих код будет видно). Так что бр сработает для отображения блоков в браузере, но никак не повлияет на текст разметки в сырцах (чего вроде добивается автор вопроса).

[Nik Faraday]

ThunderCat, спасибо большое, я это учту. Но ни один из этих вариантов не работает) Я в конце каждой строки ставил БР и \n. И ничего((

Answer 3

[ThunderCat]

let appendEventBlock = "<a href=" + eventDetailsUlr + " style='font-size: 16px; color: blue'>" + scheduledDate + "</a>
<br />
<span>@localizator["Executor"]: " + event.executor.firstName + " " + event.executor.lastName + "</span>
<span class='text-muted text-break'>@localizator["Note"]: " + event.note + "</span>
";
document.getElementById(appendEventContainer).innerHTML += appendEventBlock;