As silly as it may sound, I still haven't found an appropriate answer.
Let's say I want to dynamically create a new DOM element and fill up its textContent/innerText with a JS string literal.
The string is so long I would like to split it into three chunks:
var h1 = document.createElement("h1"); h1.textContent = "This is a very long string and I would like to insert a carriage return HERE... moreover, I would like to insert another carriage return HERE... so this text will display in a new line";
The problem is, if i write
h1.textContent = "...I would like to insert a carriage return here... \n";
it doesn't work, probably because the browser considers the '\n' to be pure text and displays it as such (the \r doesn't work either).
On the other hand, I could change the h1.innerHTML instead of the textContent and write:
h1.innerHTML = "...I would like to insert a carriage return here...<br />";
Here the <br /> would do the job, but doing so would replace not just the text content but all the HTML content of my h1, which is not quite what I want.
Is there a simple way to solve my problem?
I wouldn't resort to creating multiple block elements just to have the text on different lines.
Any idea would be greatly appreciated.
Thanks in advance.
Type <br /> (or <br>) where the line break should occur. There is no separate end br tag because it's what's known as an empty (or void) element; it lacks content. Typing br as either <br /> or <br> is perfectly valid in HTML5.
Knowing this, you can manipulate the text of an HTML element to add a new line by changing the innerHTML property and adding the <br/> element.
I know this question posted long time ago.
I had similar problem few days ago, passing value from web service in json
format and place it in table
cell
contentText
.
Because value is passed in format, for example, "text row1\r\ntext row2"
and so on.
For new line in textContent
You have to use \r\n
and, finally, I had to use css white-space: pre-line;
(Text will wrap when necessary, and on line breaks) and everything goes fine.
Or, You can use only white-space: pre;
and then text will wrap only on line breaks (in this case \r\n
).
So, there is example how to solve it with wrapping text only on line breaks :
var h1 = document.createElement("h1"); //setting this css style solving problem with new line in textContent h1.setAttribute('style', 'white-space: pre;'); //add \r\n in text everywhere You want for line-break (new line) h1.textContent = "This is a very long string and I would like to insert a carriage return \r\n..."; h1.textContent += "moreover, I would like to insert another carriage return \r\n..."; h1.textContent += "so this text will display in a new line"; document.body.appendChild(h1);
I ran into this a while ago. I found a good solution was to use the ASCII representation of carriage returns (CODE 13). JavaScript has a handy feature called String.fromCharCode()
which generates the string version of an ASCII code, or multiple codes separate by a comma. In my case, I needed to generate a CSV file from a long string and write it to a text area. I needed to be able to cut the text from the text area and save it into notepad. When I tried to use the <br />
method it would not preserve the carriage returns, however, using the fromCharCode method it does retain the returns. See my code below:
h1.innerHTML += "...I would like to insert a carriage return here..." + String.fromCharCode(13); h1.innerHTML += "Ant the other line here..." + String.fromCharCode(13); h1.innerHTML += "And so on..." + String.fromCharCode(13); h1.innerHTML += "This prints hello: " + String.fromCharCode(72,69,76,76,79);
See here for more details on this method: w3Schools-fromCharCode()
See here for ASCII codes: ASCII Codes
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With