Can't get text to line break with
after inserting with innerHTML

Question

I'm relatively new to HTML, js, coming from Delphi. I have reviewed the following answers but they don't seem to work for me, or I am not understanding what they are saying:

Multi line print
.innerHTML <br> breaking
html <br> and innerHTML problem

Problem: all my text is printing in one line, rather than line breaking.

Below is the HTML source.

<!DOCTYPE HTML>
<html>
<head>
  <title>Test Module</title>
</head>
<body >
<p id="demo"></p>

<button id="btnRPCTest" onclick="RPCTest()">Test RPC call</button>
<p id="RPCTarget">(RPC output here...)</p>

<script id="broker" src="scripts/rpcbroker.js" type="text/javascript"></script>
<script>
  function RPCTest() {
    var Div = document.getElementById("RPCTarget")

    Broker_CallV("XUS INTRO MSG", []);
    var text = Broker_ResultsDelim("<br />\n");
    Div.innerHTML = text;
  }
</script>
</body>
</html>

Above, the code makes a remote procedure call (RPC) to the server, and the results are put into a custom TStringList object that I created, that at it's core is an array of strings.

Below, is the code that gets back the results as a string, deliminated by the specified parameter ADelim.

function Broker_ResultsDelim(ADelim) {
  return TStringList.GetTextDelim(RPCBrokerV.Results, ADelim);
}

Below, the array of strings should be concatenated into one long string, with contained line breaks.

GetTextDelim: function (Self, ADelim) {
  return (Self.FData).join(ADelim) + ADelim;
},

When I run this code, and step through it with the Chrome developer console, I can type 'text' in the console, and the line breaks are correct.

> text
"

 ...............................................................
 .................#.............................................
 ...###############.......##############..........########......
 .################......################........####...####.....
 .##.....####..........##....####.....###......##.......####....
 .###....###...##............###......##......##................
 ..##....#######.............###.....###.....###................
 .......###..##.............##########.......###....#########...
 .......###.................###...............##........###.....
 .......###.................###...............###......####.....
 ......###.................###.................####....###......
 ...###########........############.............##########......
 ......................................................###......
 ................................................########.......
 ...............................................................
<br />
"

But after the text gets inserted into the div, it is all on one line. I can't demonstrate that here, because when I copy the text (which appears on the screen to be all one line), and paste it into this question on StackOverflow, suddenly is is formatted correctly, with line breaks.

This makes me think that the text does contain the line break BR codes , but they are being ignored in the div.

I would think that this should be an easy question for someone knowledgeable in HTML, but it's got me scratching my head in confusion. Thanks in advance for the help.

Kevin

You're obviously using a scripting language (I'm guessing client-side Javascript?). Please add the appropriate language tag to the question. Also, please provide a working http://jsfiddle.net demonstrating the issue. — Jared Farrish, Jun 29 '14 at 21:35
I don't think I can demonstrate this on jsfiddle, since it connects to a private back-end server that I can't expose. — kdtop, Jun 29 '14 at 21:41
I added javascript tag to the question. Is that more appropritae? — kdtop, Jun 29 '14 at 21:41
@Hardy, I changed the code line above like this: Div.innerHTML = "
" + text + "
", and now it appears properly formatted. Thanks! I see that
is for preserving formatting. And I see why that works. But I don't see why the /BR\ tags were ignored before. — kdtop, Jun 29 '14 at 21:45

score 3 · Answer 1 · answered Jun 29 '14 at 21:43

I'm going to ignore how you're generating the text. I'm going to assume that it is returned in a format like this, where there are actual line breaks ("\n") at the end of every line:

var code = 
 "\
 ...............................................................\
 .................#.............................................\
 ...###############.......##############..........########......\
 .################......################........####...####.....\
 .##.....####..........##....####.....###......##.......####....\
 .###....###...##............###......##......##................\
 ..##....#######.............###.....###.....###................\
 .......###..##.............##########.......###....#########...\
 .......###.................###...............##........###.....\
 .......###.................###...............###......####.....\
 ......###.................###.................####....###......\
 ...###########........############.............##########......\
 ......................................................###......\
 ................................................########.......\
 ...............................................................\
"

I used \ to concatenate the strings, but a "\n" works as well. Now, all you have to do is:

CSS

html {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
    /* so that the text is monospace and lines up correctly */
}

HTML

<div id="holder">
</div>

JavaScript

$("#holder").append(code.split("\n").join("<br>"));
// or, without jQuery
document.getElementById("holder").innerHTML = code.split("\n").join("<br>");

fiddle

Your second option is to, as Hardy mentioned in the comments, use a <pre> tag. This will maintain the formatting that you give it, so all you would have to do is insert code into a <pre> tag.

Also possible with CSS, [see `white-space`](https://developer.mozilla.org/docs/Web/CSS/white-space). You'll end up with something similar to `
`. — Tobias, Jun 29 '14 at 21:46
Thanks for this reply. I forgot about using css to address the problem. So much to learn.... — kdtop, Jun 29 '14 at 22:04

score 2 · Accepted Answer · answered Jun 29 '14 at 21:53

2

Use <pre> tag in your javascript like:

<script>
  function RPCTest() {
    var Div = document.getElementById("RPCTarget")

    Broker_CallV("XUS INTRO MSG", []);
    var text = Broker_ResultsDelim("\n");
    Div.innerHTML = "<pre>" + text + "</pre>";
  }
</script>

answered Jun 29 '14 at 21:53

Hardy

5,590
2
18
27

This did it. But as per comment above, I will have to study more to understand why this was needed. Thanks! – kdtop Jun 29 '14 at 22:01

score 0 · Answer 3 · answered Jun 29 '14 at 21:57

0

you only have one 

<br/>

tag in your output. Notice that it is at the end of the console output you need to replace \n line breaks with

<br />

or replace

<p id="RPCTarget">(RPC output here...)</p>

with

<pre id="RPCTarget">(RPC output here...)</pre>

and remove the trailing

<br />

answered Jun 29 '14 at 21:57

Jegsar

501
6
22

Thanks for the reply. I don't think that there is just one
, however. Just only one that shows. See the code to see that the join command uses the passed delimiter. – kdtop Jun 29 '14 at 22:01
Except when you type text in the console you get your output with many lines without
and with a lot of \n breaks. Text is set after you do anything to the string so whatever text is, is exactly what you are setting the inner html to. Please just try pre instead of p and see what happens. – Jegsar Jun 29 '14 at 22:08

Can't get text to line break with after inserting with innerHTML

3 Answers3

fiddle

Can't get text to line break with
after inserting with innerHTML