javascriptline-breakscreatetextnode

javascript Replacing \n with <br> inside createTextNode

I have a String with \n - line breaks in Javascript, that I want to replace for another text using createTextNode() in Javascript. 

<script type="text/javascript">

function changeText() {

var Explanation="Test\n Test2";

var parent3 = document.getElementById("The_Explanation"); 
parent3.innerHTML='';  
var myP3 = document.createElement("p");
var myText3 = document.createTextNode(""+Explanation);
myP3.appendChild(myText3);
parent3.appendChild(myP3);
}
</script>

All tries to get the line break into the new text failed so far. All functions that replace \n to <br> only bring me to the result 

"Test<br> Test2"

Any ideas anyone?

Solution

  • You can't put an element node inside a text node. Text nodes cannot have child nodes.

    1. Split your string on new lines
    2. Loop over the array and generate a text node for each part
    3. Use createElement('br') to create a line break to go between each text node
    4. append all of the above