Adding newline in HTML using Javascript [duplicate]

Question

I'm trying add a newline after some text every time a button is pressed. Here is the part of HTML file concerning the question -

<input type="text" id="fname" name="fname">

<button type = "button" onclick = "prtText('fname')">SEND</button>

<p id="para"></p>

<script>

var node = document.createElement("P");

function prtText(addr)
{
var x = document.getElementById(addr).value;
var txt = x + '\n'
var textnode = document.createTextNode(txt);

node.appendChild(textnode);
document.getElementById("para").appendChild(node);
}

</script>

Now, when I run the HTML file, every time I press the button, the text on the input box should get printed with a newline. Like this-

ExampleText
ExampleText

But it gets printed something like this- ExampleText ExampleText.

I have tried the other method like this - var txt = x + '<br/>', but it prints like this - ExampleText<br/>ExampleText<br/> and doesn't print a line break.

What do I do?

Answer 1

It's generally not a good idea to use inline event handlers. Here's a snippet that adds the input value to paragraph (p#para) and empties the input element on clicking button#sendBttn. The value is wrapped in a div, a block level element, meaning it will always start on a new 'line'. ¹

¹ You can also end a value string with <br>, but in that case you can not use a innerText, createTextNode or textContent.

document.addEventListener("click", printValue);

function printValue(evt) {
  // only do stuff when the button was clicked
  if (evt.target.id === "sendBttn") {
    const inputEl = document.querySelector("input#fname");
    const value = inputEl.value.trim();
    // value may be empty
    if (value) {
      // create an block element
      const newLine = document.createElement("div");
      // fill with the value
      newLine.textContent = "Sent: " + value;
      // append it to the existing paragraph
      document.querySelector("#para").appendChild(newLine);
      // reset input value
      inputEl.value = "";
      // focus back to the input field
      inputEl.focus();
    }
  }
}

body {
  font: normal 12px/15px verdana, arial;
  margin: 2rem;
}

#para div {
  padding: 2px 3px;
  border: 1px solid #eee;
  max-width: 500px;
  margin: 2px;
}

<input type="text" id="fname" name="fname">
<button type="button" id="sendBttn">SEND</button>
<p id="para"></p>

Answer 2

<input type="text" id="fname" name="fname">

<button type = "button" onclick = "prtText('fname')">SEND</button>

<p id="para"></p>

<script>

var node = document.createElement("P");

function prtText(addr)
{
var txt = '\n'+ document.getElementById(addr).value ;
document.getElementById("para").innerText+= txt;
}

</script>

Here you go. HTML elements have property innerText which allows you to edit contents of element. Beware that it will change inside elements if there are any.

Answer 3

That happens because new lines are transformed into spaces in HTML. For example:

<p>
  This is a sentence. Sometimes sentences get too big to
  fit inside a single line, so we break the line in two.
</p>

In the above example, the text node inside the <p> element, has a newline, but the rendered output doesn't break there.

Line breaks in HTML are made using the <br> element.

<p>
  This sentence is in the first line.<br>
  This one is in the second.
</p>

You could use document.createElement("br") and append the element between two text nodes to create two lines, but there's a simpler way, innerText.

const elem = document.getElementById("demo");

elem.innerText = "First line\nSecond line"

<p id="demo"></p>