如何在我的 onclick="('', '') 中添加换行符 (<br>)答案

【问题标题】：How to add a linebreak (<br>) to my onclick="('', '')如何在我的 onclick="('', '') 中添加换行符 (<br>)
【发布时间】：2020-03-18 13:21:17
【问题描述】：

我试图在我的 onclick=('','') 中用换行符写出一个 p，但是 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");

希望有人能帮忙
提前感谢您的帮助！！！

【问题讨论】：

innerHtml 只创建一个内部带有“
”的文本字符串？
我认为你应该添加一个 dom 元素，而不是字符串
你也可以试试\n或\n\r来代替

标签： javascript html line-breaks

【解决方案1】：

可能不整洁，但会工作。

使用转义字符

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

【讨论】：

【解决方案2】：

试试这个。

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

【讨论】：