Can't get effect of "\n" in javascript

Question

function myMap() {
 var addrlist = document.getElementById("addresslist");

 var jsaddr = "Address Line1 <br /> Address Line 2 <br /> Address Line 3";
 var addr = jsaddr.split("<br />"); 
 //alert(addr);
 var addrfinal = "";
 for(var j=0;j<addr.length;j++)
 {
      addrfinal = addrfinal + addr[j] + "\n";
 }
 alert(addrfinal);
    
 var traddr = document.createElement("tr");
 var tdaddr = document.createElement("td");
 var tdaddress = document.createTextNode(addrfinal);
 tdaddr.appendChild(tdaddress);
 traddr.appendChild(tdaddr);
 addrlist.appendChild(traddr);   
}

<table id="addresslist">
</table>
<input type="button" value="Click" onclick="myMap()" />

I want to add address to table line by line. But when I alert string it will get the effect of "\n", but in string I can't get the effect of "\n"

http://stackoverflow.com/questions/1155678/javascript-string-newline-character Try read this But when dealing with html, use — Dušan Tichý, Oct 13 '16 at 06:33
But when I add
then it will write
like Address Line 1
Address Line 2 — Riddhi Rathod, Oct 13 '16 at 06:37

Rajshekar Reddy · Accepted Answer · 2016-10-13T06:43:48.767

I want to add address to table line by line.

In that case you are just complicating things. All you need is to use innerHTML property on the td element and assign your initial string.

tdaddr.innerHTML = jsaddr;

Check the example below.

function myMap() {
 var addrlist = document.getElementById("addresslist");

 var jsaddr = "Address Line1 <br /> Address Line 2 <br /> Address Line 3";      
  
 var traddr = document.createElement("tr");
 var tdaddr = document.createElement("td");
 
 tdaddr.innerHTML = jsaddr;  // this is the change
 traddr.appendChild(tdaddr);
 addrlist.appendChild(traddr);   
}

<table id="addresslist">
</table>
<input type="button" value="Click" onclick="myMap()" />

@RiddhiRathod glad to help :) – Rajshekar Reddy Oct 13 '16 at 06:46 — Rajshekar Reddy, Oct 13 '16 at 06:46

score 0 · Answer 2 · answered Oct 13 '16 at 06:42

You could create a <br> tag and assign line for line to the table element.

function myMap() {
    var addrlist = document.getElementById("addresslist");
    var jsaddr = "Address Line1 <br /> Address Line 2 <br /> Address Line 3";
    var addr = jsaddr.split("<br />");
    var traddr = document.createElement("tr");
    var tdaddr = document.createElement("td");
    for (var j = 0; j < addr.length; j++) {
        if (j) {
            tdaddr.appendChild(document.createElement('br'));
        }
        tdaddr.appendChild(document.createTextNode(addr[j]));
    }
    traddr.appendChild(tdaddr);
    addrlist.appendChild(traddr);
}

<table id="addresslist"></table>
<input type="button" value="Click" onclick="myMap()" />

score 0 · Answer 3 · answered Oct 13 '16 at 06:42

You should create rows inside the loop, see the follow script:

function myMap() {
 var addrlist = document.getElementById("addresslist");

 var jsaddr = "Address Line1 <br /> Address Line 2 <br /> Address Line 3";
 var addr = jsaddr.split("<br />"); 
 //alert(addr);
 var addrfinal = "";
 for(var j=0;j<addr.length;j++)
 {
     addrfinal = addrfinal + addr[j] + "\n";
      
        var traddr = document.createElement("tr");
        var tdaddr = document.createElement("td");
        var tdaddress = document.createTextNode(addr[j]);
        tdaddr.appendChild(tdaddress);
        traddr.appendChild(tdaddr);
        addrlist.appendChild(traddr); 
 }
 alert(addrfinal);

}

<table id="addresslist">
</table>
<input type="button" value="Click" onclick="myMap()" />

Can't get effect of "\n" in javascript

3 Answers3