Как добавить перевод строки (<br>) в мой onclick = "('', '')

Question

Я пытаюсь написать ap в моем onclick = ('', '') с переносами строк, но br не будет работать.

Я хочу иметь возможность сделать это:

'привет
как дела?'

Html:

<area shape="circle" coords="200,38,28" onclick="MapPopUp('Example','hi how are you doing')" alt="">

<div id="popUp" class="hidden">
            <h3 id="popUpHeader"></h3>
            <p id="popUpContent"></p>
            <div>
                <a onclick="CloseMapPopUp();">
                    <img id="close" src="images/close.png" alt="close button">
                </a>
            </div>
        </div>

JS:

function MapPopUp(header, content) {
    PopUpDiv.classList.remove("hidden");
    PopUpHeader.innerHTML = header;
    PopUpContent.innerHTML = content;
}

function CloseMapPopUp() {
    PopUpDiv.classList.add("hidden");
    PopUpHeader.innerHTML = "";
    PopUpContent.innerHTML = "";
}

var PopUpDiv = document.getElementById("popUp");
var PopUpHeader = document.getElementById("popUpHeader");
var PopUpContent = document.getElementById("popUpContent");

Я надеюсь, что кто-то там может help
Заранее спасибо за помощь !!!

Answer 1

Попробуйте это.

    div= document.getElementById("popUp");
    br = document.createElement("br");
    div.appendChild(br);

Answer 2

Может быть неопрятным, но будет работать.

с использованием escape-символа

onclick="MapPopUp('Example','hi \n\r how are you doing')"

и ваша функция MapPopUp может выглядеть примерно так:

   function MapPopUp(header, content) {
      PopUpDiv.classList.remove('hidden');
      PopUpHeader.innerHTML = header;
      let contentHtml = '';
      content.split('\n\r').forEach(c => {
        contentHtml += `<p>${c.trim()}</p>`;
      });
      PopUpContent.innerHTML = contentHtml;
    }