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>

<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.

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 linenSecond line"

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

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?