Добавление новой строки в HTML с использованием Javascript

Question

Я пытаюсь добавить новую строку после текста каждый раз, когда нажимается кнопка. Вот часть файла HTML, касающаяся вопроса -

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

Теперь, когда я запускаю файл HTML, каждый раз, когда я нажимаю кнопку, текст в поле ввода должен печататься с перевод строки. Примерно так -

ExampleText
ExampleText

Но печатается примерно так - ExampleText ExampleText.

Я пробовал другой метод вроде этого - var txt = x + '<br/>', но он печатает вот так - ExampleText<br/>ExampleText<br/> и не выводит разрыв строки.

Что мне делать?

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

Вот вам go. HTML элементы имеют свойство innerText, которое позволяет редактировать содержимое элемента. Помните, что он изменится внутри элементов, если они есть.

Answer 2

Обычно не рекомендуется использовать встроенные обработчики событий. Вот фрагмент, который добавляет значение ввода к абзацу (p#para) и очищает элемент ввода при нажатии button#sendBttn. Значение заключено в div, элемент уровня блока , что означает, что оно всегда будет начинаться с новой «строки». ¹

¹ Вы также можете закончить строку значения <br>, но в этом случае вы можете не используйте innerText, createTextNode или 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 3

Это происходит потому, что новые строки преобразуются в пробелы в HTML. Например:

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

В приведенном выше примере текстовый узел внутри элемента <p> имеет новую строку, но визуализированный вывод там не прерывается.

Разрывы строк в HTML выполняются с помощью элемента <br>.

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

Вы можете использовать document.createElement("br") и добавить элемент между двумя текстовыми узлами, чтобы создать две строки, но есть более простой способ, innerText.

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

elem.innerText = "First line\nSecond line"

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