如何设置元素的 textContent，而不修剪字符串？

Question

I'm trying to set an element's text content (a div element) to something the user has given as input. I don't really want to use element.innerHTML = (...) because then it could be parsed as HTML code instead of plain text, so I'm using element.textContent = (...) .
However, there can be spaces at the beginning (and at the end) of the input string, and I don't want the string to be trimmed before inserted into the element.
With innerHTML , I could simply replace all spaces with   , but textContent doesn't show that as a space, but as plain   .

How can I do it? Thanks in advance :)

Answer 1

To make whitespace render as it exists in the DOM, you can apply white-space: pre-wrap in CSS:

 for (const target of document.getElementsByClassName('target')) { target.textContent = " Some text with various spaces "; }

 .preserve-whitespace { white-space: pre-wrap; } .target { border: 1px solid red; float: left; clear: left; margin-top: 0.5em; }

 <div class="target"></div> <div class="target preserve-whitespace"></div>