使用 document.getElementByID 时如何添加换行符

Question

我正在传递一个 javascript 变量，它在一个句子中包含一个字符串。 因此，在显示变量时，我想像这样将句子分成两行，即

海得拉巴马达哈普尔

印度-500081

 let streetName ='Madhapur, Hyderabad India-500081'; function render() { document.getElementById('result').innerHTML = streetName ; }

 <div id="result"></div> <button onclick="render()">display</button>

请注意，这不起作用： let streetName ='Madhapur, Hyderabad \n India-500081'

Answer 1

另一种选择是使用 CSS white-space: pre-line

 let streetName ='Madhapur, Hyderabad \n India-500081'; function render() { document.getElementById('result').textContent = streetName ; }

 #result { white-space: pre-line }

 <div id="result"></div> <button onclick="render()">display</button>

Answer 2

请使用 br 标签。

 let streetName ='Madhapur, Hyderabad<br/> India-500081'; function render() { document.getElementById('result').innerHTML = streetName ; }

 <div id="result"></div> <button onclick="render()">display</button>

Answer 3

您正在尝试在 html 中添加 \n ，并且 html 中的携带返回是使用<br>完成的

Answer 4

由于您使用的是 innerHTML，因此您可以使用

 ``` let streetName = "Madhapur, Hydrabad <br> India - 500081"; function render() { document.getElementById('result').innerHTML = streetName ; } ```

 <div id="result"></div> <button onclick="render()">display</button>

Answer 5

您需要将.innerHTML （不是.innertext ）与标签一起使用

document.getElementById(`pId`).innerHTML = `1st line text  <br> second line text`
or with the old concat way :
document.getElementById(`pId`).innerHTML = "1st line text" + "<br>" + "second line text"

提示：请记住，每次您在同一标签上使用 getElementById 时，它都会删除内部文本并替换为 new ，因此请尝试将所有更改保存到 var 然后 .innerHTML=urVar