Adding newline in HTML using Javascript

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 + ' ', but it prints like this - ExampleText ExampleText  and doesn't print a line break.

What do I do?

@DNT, the `.appendChild(node);` adds new text just after the previous `child` or in this case the previous text, however if I press the button again the same problem arises. — NotMyName, May 26 '20 at 10:17
Maybe you're looking for this: https://stackoverflow.com/a/9492675/12734467 — kwsp, Mar 23 '21 at 12:10

matek997 · Answer 1 · 2020-05-26T10:47:39.427

1

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

edited May 26 '20 at 10:47

answered May 26 '20 at 10:18

matek997

349
1
12

For some reason, it still gives me `ExampleText ExampleText`, notice the space between the two texts. – NotMyName May 26 '20 at 10:24
What is the code for element with id 'para'? What tag, what styles are applied? – matek997 May 26 '20 at 10:30
@NotMyName i've edited my answer to have running code. It works, problem must be somewhere else for you. – matek997 May 26 '20 at 10:48
It works after adding the `+=`, but what does it do? – NotMyName May 26 '20 at 11:15
@NotMyName "+=" shorthand for adding something (concatenating here). You can write `myVariable = myVariable + 1` or use shorter version `myVariable += 1`. It does the same thing. – matek997 May 26 '20 at 12:06

KooiInc · Accepted Answer · 2020-05-26T11:13:22.143

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

Thank you for elaborating the code! Just realized using Inline event handlers makes the code really messy and its a good idea to use event listeners! P.S: I'm keeping the CSS code. — NotMyName, May 26 '20 at 11:33

score 0 · Answer 3 · answered May 26 '20 at 10:15

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  element, has a newline, but the rendered output doesn't break there.

Line breaks in HTML are made using the   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>

I read through your answer and modified the code and used `.innerText`, but it still prints `ExampleText ExampleText` — NotMyName, May 26 '20 at 10:41

Adding newline in HTML using Javascript

3 Answers3