用 JS 设置元素的文本会忽略 \n 换行符？

Question

I want to set a the text of a paragraph element via JS. The string contains line breaks (\n), but they are not visible in the paragraph .

This is the desired result :

 <p> Lorem ipsum dolor sit amet,<br> consetetur sadipscing elitr,<br> sed diam nonumy <br> eirmod tempor... </p>

This it how it looks when I set the text via JS :

 document.getElementById("text").textContent = "Lorem ipsum dolor sit amet,\n" + "consetetur sadipscing elitr,\n" + "sed diam nonumy \n eirmod tempor...";

 <p id="text"></p>

How can I achieve the behaviour of the first example with JS?

Answer 1

From the MDN documentation for HTMLElement.innerText :

Note: innerText is easily confused with Node.textContent , but there are important differences between the two. Basically, innerText is aware of the rendered appearance of text, while textContent is not.

So, if you use innerText instead, you'll get the expected result:

 document.getElementById("text").innerText = "Lorem ipsum dolor sit amet,\n" + "consetetur sadipscing elitr,\n" + "sed diam nonumy \n eirmod tempor...";

 <p id="text"></p>

Don't reach for innerText all the time: textContent is more performant... but in some cases like this, innerText is the right tool.

Answer 2

You can try this too. Using insertAdjacentHTML

 let innerElem = ` Lorem ipsum dolor sit amet,<br> consetetur sadipscing elitr,<br> sed diam nonumy <br> eirmod tempor...`; document.getElementById("text").insertAdjacentHTML("afterbegin",innerElem);

 <p id="text"></p>