CODEWITHSUNDEEP
javascripthtml
Sunghun Kwak
Sunghun Kwak

Reputation: 13

I can't use '\n" in javascript, I don't know why it isn't work

As I know, writing a new line is "\n", so I tried many times but it wasn't working. This is my source code and screen shot of result 

var ary3 = new Array('seven','eight', 'nine');
for (var i =0; i<ary3.length ; i++){
    document.getElementById('demo3').innerHTML += i+"'\nth element\n[enter image description here][1] : " + ary3[i]+"\n";
}
<h1>Show me the array object's entry</h1>
<div id = 'demo3'></div>
<br>

Upvotes: 0

Views: 1960

Answers (6)

Al Foиce ѫ
Al Foиce ѫ

Reputation: 4315

Your output is html. In html, use the <br /> tag to break the line.

Upvotes: 0

Pavel
Pavel

Reputation: 656

The problem is that the newline from JS will be rendered as plain space. HTML is responsible for new line showing, but HTML will not pay attention to simple new line in text. You can check your HTML using developer's tools. You will see that JS made new lines: derveloper tools

To make new line work, you should add <br /> tag

var ary3 = new Array('seven','eight', 'nine');
for (var i =0; i<ary3.length ; i++){
    document.getElementById('demo3').innerHTML += i+"'<br/>\nth element<br/>\n[enter image description here][1] : " + ary3[i]+"<br/>\n";
}
<h1>Show me the array object's entry</h1>
<div id = 'demo3'></div>
<br>

Upvotes: 1

user128511
user128511

Reputation:

Whitespace is generically collapsed to at most a single space in HTML. Example

<div>a
b        c</div>

Will appear as just a b c

You have a few options

  1. Use pre 

    <pre>a
b</pre>

    Will appear as

    a
b

  2. Use white-space: pre; CSS on your div

     <div style="white-space: pre;">a
 b</div>

    Will break line breaks

  3. Insert <br/> for `\n' as in

     var someString = "a\nb\nc";
 someElement.innerHTML = someString.replace(/\n/g, "<br/>");

As for your specific example of looping you also have the option to insert separate elements

function insertDivWithText(parent, text) {
   var div = document.createElement("div");
   div.appendChild(document.createTextNode(text));
   parent.appendChild(div);
}

var demo3 = document.querySelector("#demo3");
var ary3 = ['seven','eight', 'nine'];
for (var i = 0; i < ary3.length ; ++i) {
   var div = document.createElement("div");
   insertDivWithText(demo3, i + "th element");
   insertDivWithText(demo3, "[enter image description here][1] : " + ary3[i]);
}
<h1>Show me the array object's entry</h1>
<div id = 'demo3'></div>
<br>

Also note that using .innerHTML with user data is likely going to expose you to scripting vulnerabilities. Consider using document.createTextNode or element.textContent or element.innerText

Upvotes: 3

guysigner
guysigner

Reputation: 2922

Html code for new line is <br>.

As in:

document.getElementById('demo3').innerHTML += i+"'nth element<br>[enter image description

Upvotes: 0

Ursus
Ursus

Reputation: 30056

You are writing HTML, DOM, so you have to use <br> tag, not newline.

Upvotes: 1

IanS
IanS

Reputation: 1604

If you are trying to create a HTML new line, use <br>.

Upvotes: 0

Related Questions