Adding a value to a list box but seperating them line by line as opposed to one line
<p>How can the code be modified below so as to allow the newly added values to appear on separate lines as opposed to just on the same line when the add button is clicked?</p>

<p>Expected result:</p>

<pre><code>Red
Blue
Green
Yellow
</code></pre>

<p>Current result:</p>

<pre><code>RedBlueGreenYellow
</code></pre>

<p>HTML:</p>

<pre><code>&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;script type="text/javascript"&gt;

function add() {
  document.getElementById('list').value += " " + document.getElementById('input').value;
}

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;
&lt;input type="text" style="width: 154px;" id="input"&gt;
&lt;input onclick="add()" type="button" style="width: 20px; height: 22px;" value="+" id="add"&gt;&lt;br&gt;
&lt;textarea style="height: 75px;" id="list"&gt;&lt;/textarea&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>
