How to display text with multiline from JavaScript to the HTML

Question

I want to display multi line text, from JavaScript to the HTML using looping. The text position is after display the image. The text result should be like Place ..... // newline price ....

<div id="display">
            <script type="text/javascript" src="../controler/package.js"></script>
</div>


var display = document.getElementById('display');

function  buildImages(images,place,k,price){
 var last=document.createElement("IMG");
    last.src=images;
    last.width=800;
    last.height=600;
    last.style.marginTop=30;
    display.appendChild(last);

    var x = document.createElement("H3");
    var t = document.createTextNode("Place:"+place);
    var z = document.createTextNode(" price:"+price);
    x.appendChild(t);
    x.appendChild(z);
    display.insertBefore(x,display.childNodes[k]);

createTextNode("Place:"+place+"\n"); and createTextNode("Price:"+price+"\n") ? — Taki
– Taki, Commented Sep 10, 2019 at 15:22
var u = document.createElement('br'); x.appendChild(t); x.appendChild(u);...? — Heretic Monkey
– Heretic Monkey, Commented Sep 10, 2019 at 15:24
if you want to display pre-formatted text in html why not just add the text to a <pre> element — MikeT
– MikeT, Commented Sep 10, 2019 at 15:28

sjahan · Accepted Answer · 2019-09-10 15:25:55Z

2

The cleanest way is probably to do the same thing you would do in HTML: wrap your text nodes in <p> elements.

Wrapping the text in an HTML element will always help you later to customize style or whatever!

Raw text nodes are not that convenient.

answered Sep 10, 2019 at 15:25

sjahan

5,9804 gold badges24 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ControlAltDel · Accepted Answer · 2019-09-10 15:26:31Z

There are multiple ways to achieve this. One is using br tags

var x = document.createElement("H3");
var t = document.createTextNode("Place:"+place);
var br = document.createElement("BR");
var z = document.createTextNode(" price:"+price);
x.appendChild(t);
x.appendChild(br);
x.appendChild(z);

Another could be using a pre tag

var x = document.createElement("H3");
var t = document.createTextNode("Place:"+place + "\n price:" + price);
x.appendChild(t);

Or you could could use two spans that have display: block;

var x = document.createElement("H3");
var t = document.createElement("SPAN");
t.style.display = "block";
t.innerText = "Place:" +place;
var z = document.createElement("SPAN");
z.style.display = "block";
z.innerText = "Price:" +price;
var z = document.createTextNode(" price:"+price);
x.appendChild(t);
x.appendChild(z);

Thomas Ludewig · Accepted Answer · 2019-09-10 15:37:36Z

0

It can not work like this by design. if you do not use

 <pre>

or

 <code>

if you want to use line feeds or if you prefer other tags like

<p>

then you has to use at least

  <br>

by this you can still format the text as you wish. Will look usually a bit messy. I would use a table.

answered Sep 10, 2019 at 15:37

Thomas Ludewig

7259 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to display text with multiline from JavaScript to the HTML

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related