\n is not working with text node in javascript

Question

In this code in TextNode i tried to put strings in different line by using \n in the following code:

var CC = function(valu, name, age){
        var parent = document.createElement("div");
            parent.id = valu;
            parent.setAttribute("onclick", "info()");
            parent.style.color = "blue";
        var heading = document.createTextNode("phone no: "+valu+"\n Name:"+name+" \nAge: "+age);
        parent.appendChild(heading);    

        var ele = document.getElementById("main");
        ele.appendChild(parent);

        }(valu, name, age);

and then when i tried this, in the line: var heading = document.createTextNode("phone no: "+valu+"\n Name:"+name+" \nAge: "+age); \n was not working. should i dont use \n in this TextNode or i am using it in a wrong way?

Answer 1

ISSUE

The issue is that document.createTextNode prevents the text from rendering as HTML.

You need to use document.createElement if you want to render HTML.

---

CHANGES

To get a working demo of your code, I had to make some improvisations.

I changed the following:

• Converted CC() to a simple function since I don't know what the rest of your code looks like.

• Changed the valu parameter to phone. Not sure what valu means.

• Added a global variable id that increments each time you call the CC() method so that the divs being created maintain unique ids.

• Inside the CC() function, I created text node variables that represent each parameter being passed in (name, phone, and age).

• Changed setAttribute() to addEventListener().

• Instead of one long appendChild(), I just did multiple showing each step, with document.createElement("br") in between each text node.

• Also note, that I added the info() function that alerts the div's information that's being clicked.

---

JAVASCRIPT

var id = 1;

function info()
{
    alert(this.innerText);
}

function CC (name, phone, age) 
{
    var parent = document.createElement("div"),
        nameText = document.createTextNode("Name: " + name),
        phoneText = document.createTextNode("Phone: " + phone),
        ageText = document.createTextNode("Age: " + age);

    parent.id = 'div' + id.toString();
    parent.style.color = "blue";
    parent.addEventListener("click", info, false);

    parent.appendChild(nameText);
    parent.appendChild(document.createElement("br"));
    parent.appendChild(phoneText);
    parent.appendChild(document.createElement("br"));
    parent.appendChild(ageText);
    parent.appendChild(document.createElement("br"));

    document.getElementById("main").appendChild(parent);
    id++;
}

CC('John Doe', '123.456.7890', '40');

See working jsFiddle demo