Как разбить строки JavaScript (форма, которая генерирует HTML-коды)

Question

Код ниже представляет собой форму, которая генерирует HTML-коды
Я хочу, чтобы каждое поле находилось на отдельной строке в поле «Текст сообщения»

Текущий вывод:

<div>texthere</div><script>texthere</script><style>texthere</style>

Ожидаемый результат:

<div>texthere</div>
<script>texthere</script>
<style>texthere</style>` 

function submitted() {
  var formValue0 = '<div>' + document.getElementsByName("content")[0].value + '</div>';
  var formValue1 = '<script>' + document.getElementsByName("content")[1].value + '<\/script>';
  var formValue2 = '<style>' + document.getElementsByName("content")[2].value + '</style>';
  document.getElementsByName("content")[3].value = formValue0 + formValue1 + formValue2;
  return false;
}

<form onsubmit="return submitted()">
  Field 1:<br><input type="text" name="content"><br> 
  Field 2:<br><input type="text" name="content"><br> 
  Field 3:<br><input type="text" name="content"><br>
  <input type="submit" value="DONE"><br><br> 
  
  Post text:<br><textarea name="content" style="height:200px"></textarea>
</form>

Вы можете использовать этот код для нескольких целей и ускорить свою работу с повторяющимися кодами, такими как пользовательский пост, который должен будет редактировать html вручную

Answer 1

Вы можете использовать символ новой строки \n вот так -

function submitted() {
   var formValue0 = '<div>'+ document.getElementsByName("content")[0].value +'</div>\n';
   var formValue1 = '<script>'+ document.getElementsByName("content")[1].value +'<\/script>\n';
   var formValue2 = '<style>'+ document.getElementsByName("content")[2].value +'</style>\n';
   document.getElementsByName("content")[3].value = formValue0+formValue1+formValue2;
   return false;
}

<form onsubmit="return submitted()"> 
  Field 1:<br><input type="text" name="content"><br>
  Field 2:<br><input type="text" name="content"><br>
  Field 3:<br><input type="text" name="content"><br>
  <input type="submit" value="DONE"><br><br> 
  Post text:<br><textarea name="content" style="height:200px"></textarea>
</form>