How can I insert new line carriage returns into an element textContent

Question

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    lt br   gt      Here the  lt br   gt  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

User · Answer

I found that inserting    n works  I e   you escape the escaped new line character

User · Answer

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  lt br   gt  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

User · Answer

The following code works well  On FireFox  IE and Chrome     var display out    This is line 1      lt br gt      This is line 2    document getElementById  demo   innerHTML   display out

User · Answer

None of the above solutions worked for me   I was trying to add a line feed and additional text to a  lt p gt  element   I typically use Firefox  but I do need browser compatibility   I read that only Firefox supports the textContent property  only Internet Explorer supports the innerText property  but both support the innerHTML property   However  neither adding  lt br   gt  nor  n nor  r n to any of those properties resulted in a new line   The following  however  did work    lt html gt   lt body gt   lt script type  text javascript  gt    function modifyParagraph        var p    p document getElementById  paragraphID      p appendChild document createElement  br       p appendChild document createTextNode  Additional text             lt  script gt    lt p id  paragraphID  gt Original text  lt  p gt    lt input type  button  id  pbutton  value  Modify Paragraph  onClick  modifyParagraph      gt   lt  body gt   lt  html gt

User · Answer

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     x000D   x000D  var h1   document createElement  h1    x000D   x000D    setting this css style solving problem with new line in textContent x000D  h1 setAttribute  style    white-space  pre     x000D   x000D    add  r n in text everywhere You want for line-break  new line  x000D  h1 textContent    This is a very long string and I would like to insert a carriage return  r n      x000D  h1 textContent     moreover  I would like to insert another carriage return  r n      x000D  h1 textContent     so this text will display in a new line   x000D   x000D  document body appendChild h1   x000D   x000D   x000D

User · Answer

You can concatenate the strings     h1 innerHTML        I would like to insert a carriage return here    lt br   gt    h1 innerHTML     Ant the other line here     lt br   gt    h1 innerHTML     And so on    lt br   gt      jsFiddle

User · Answer

Change the h1 textContent to h1 innerHTML and use  lt br gt  to go to the new line

User · Answer

Use element innerHTML  some     n some

User · Answer

You could use regular expressions to replace the   n  or   n r  characters with   lt br   gt     you have this   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     you can replace your characters like this   h1 innerHTML   h1 innerHTML replace   n r  g    lt br   gt       check the javascript reference for the String and Regex objects   http   www w3schools com jsref jsref replace asp  http   www w3schools com jsref jsref obj regexp asp

User · Answer

nelek s answer is the best one posted so far  but it relies on setting the css value  white-space  pre  which might be undesirable   I d like to offer a different solution  which tries to tackle the real question that should ve been asked here    How to insert untrusted text into a DOM element    If you trust the text  why not just use innerHTML   domElement innerHTML   trustedText replace   r g      replace   n g    lt br gt       should be sufficient for all the reasonable cases   If you decided you should use  textContent instead of  innerHTML  it means you don t trust the text that you re about to insert  right  This is a reasonable concern   For example  you have a form where the user can create a post  and after posting it  the post text is stored in your database  and later on appended to pages whenever other users visit the relevant page   If you use innerHTML here  you get a security breach  i e   a user can post something like   script alert 1    script     try to imagine that    are  lt    apparently stack overflow is appending text in unsafe ways    which won t trigger an alert if you use innerHTML  but it should give you an idea why using innerHTML can have issues  a smarter user would post    img src  invalid src  onerror  alert 1      which would trigger an alert for every other user that visits the page  Now we have a problem  An even smarter user would put display  none on that img style  and make it post the current user s cookies to a cross domain site  Congratulations  all your user login details are now exposed on the internet   So  the important thing to understand is  using innerHTML isn t wrong  it s perfect if you re just using it to build templates using only your own trusted developer code  The real question should ve been  how do I append untrusted user text that has newlines to my HTML document    This raises a question  which strategy do we use for newlines  do we use  br  elements   p s or  div s   Here is a short function that solves the problem   function insertUntrustedText domElement  untrustedText  newlineStrategy        domElement innerHTML           var lines   untrustedText replace   r g      split   n        var linesLength   lines length      if newlineStrategy      br             for var i   0  i  lt  linesLength  i                  domElement appendChild document createTextNode lines i                 domElement appendChild document createElement  br                         else           for var i   0  i  lt  linesLength  i                  var lineElement   document createElement newlineStrategy               lineElement textContent   lines i               domElement appendChild lineElement                       You can basically throw this somewhere in your common functions js file and then just fire and forget whenever you need to append any user api etc -  untrusted text  i e  not-written-by-your-own-developer-team  to your html pages   usage example   insertUntrustedText document querySelector   myTextParent     line1 nline2 r nline3    br      the parameter newlineStrategy accepts only valid dom element tags  so if you want  br  newlines  pass  br   if you want each line in a  p  element  pass  p   etc

[javascript] How can I insert new line/carriage returns into an element.textContent?

Examples related to javascript

Examples related to string

Examples related to escaping

Examples related to carriage-return