newline character doesn’t work with append

<html>

<head>
  <title></title>

  <style type="text/css">
    body {
      background-color: #D3D3D3;
      font-family: arial;
      text-align: right;
      color: #008B8B;
    }

    #contentwrap {
      border: 8px #800000 solid;
      padding: 20px;
      width: 600px;
      border-radius: 25px;
      text-align: right;
      background: white;
      margin: 40px auto 0px auto;
    }

    #formwrap {

      text-align: center;
      margin: 0px 0px 60px 0px;
      min-height: 300px;
    }

    #title {
      font-size: 2.2em;
      border-bottom: 7px #008B8B double;
      padding: 10px 0px 10px 0px;
      color: #008B8B;
      text-align: center;
    }

    #formtext {
      text-align: center;
      margin-top: 5px;
    }

    .formfield {

      text-align: center;
      margin: 5px 20px 10px 20px;
    }

    #button {
      border-radius: 20px;

    }

    #output {
      font-size: 1em;
    }
  </style>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

  <script type="text/javascript">
    $(document).ready(function() {
      document.getElementById("button").onclick = output;
    }); // ends document.ready

    function output() {
      var word = document.getElementById("word").value + "n";
      var end = document.getElementById("repeatnum").value;
      var color = document.getElementById("usercolor").value;
      var output = document.getElementById("output");
      output.style.color = color;
      for (var i = 0; i < end; i++) {
        output.append(word);
      }
    }
  </script>

</head>

<body>

  <div id="contentwrap">

    <div id="title">Fun with Loops</div> <br />

    <div id="formwrap">

      <form>

        <div id="formtext">Enter any word</div>
        <div><input type="text" id="word" class="formfield" size="20"></div>

        <div id="formtext">Enter number of times to repeat word</div>
        <div><input type="text" id="repeatnum" class="formfield" size="20"></div>

        <div id="formtext">Enter color for text</div>
        <div><input type="text" id="usercolor" class="formfield" size="20"></div>

        <div style="margin-top:10px;">
          <input type="button" value="Show Output" id="button">
        </div>

      </form>

      <div id="output"></div>
    </div>
  </div>
</body>

</html>

The given program takes three inputs a word to be printed ,number of times to print that word and a colour to apply on all the words and then prints the word entered the number of time in a new line with the colour. The problem i am facing is that word is currently being printed in the same line and not in a new line. I have used “n” ,
and
but it doesn’t seem to print out the word in a new line everytime. please suggest me a way that works on my code to print the word in a new line in the .(Note- the line to be looked at is output.append(word)).Also as a request no big edits in the code as this the final thing missing

Answer

Here is a working example, the concept behind is string concatenation.

    $(document).ready(function() {
      document.getElementById("button").onclick = output;
    }); // ends document.ready

    function output() {
      var word = document.getElementById("word").value + "</br>";
      console.log(word);
      var end = document.getElementById("repeatnum").value;
      var color = document.getElementById("usercolor").value;
      var output = document.getElementById("output");
      output.innerHTML = "" //Reset the output
      output.style.color = color;
      for (var i = 0; i < end; i++) {
        output.innerHTML += word; // <-- Add a new "word" to the id element html.
      }
    }
    body {
      background-color: #D3D3D3;
      font-family: arial;
      text-align: right;
      color: #008B8B;
    }

    #contentwrap {
      border: 8px #800000 solid;
      padding: 20px;
      width: 600px;
      border-radius: 25px;
      text-align: right;
      background: white;
      margin: 40px auto 0px auto;
    }

    #formwrap {

      text-align: center;
      margin: 0px 0px 60px 0px;
      min-height: 300px;
    }

    #title {
      font-size: 2.2em;
      border-bottom: 7px #008B8B double;
      padding: 10px 0px 10px 0px;
      color: #008B8B;
      text-align: center;
    }

    #formtext {
      text-align: center;
      margin-top: 5px;
    }

    .formfield {

      text-align: center;
      margin: 5px 20px 10px 20px;
    }

    #button {
      border-radius: 20px;

    }

    #output {
      font-size: 1em;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>

  <div id="contentwrap">

    <div id="title">Fun with Loops</div> <br />

    <div id="formwrap">

      <form>

        <div id="formtext">Enter any word</div>
        <div><input type="text" id="word" class="formfield" size="20"></div>

        <div id="formtext">Enter number of times to repeat word</div>
        <div><input type="text" id="repeatnum" class="formfield" size="20"></div>

        <div id="formtext">Enter color for text</div>
        <div><input type="text" id="usercolor" class="formfield" size="20"></div>

        <div style="margin-top:10px;">
          <input type="button" value="Show Output" id="button">
        </div>

      </form>

      <div id ="output">
      </div>
    </div>
  </div>
</body>