Add value to existing value
<p>When a user types in an input box, I want their name to be displayed <strong>after</strong> the text 'hello'. Instead of doing this, the word 'hello' is removed and replaced by their name.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var name = document.getElementById('username');
var div = document.getElementById('displayname');

name.onkeyup = function() {
  div.value = name.value;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" placeholder="Name" id="username"&gt;
&lt;input type="submit" id="displayname" value="Hello"&gt;</code></pre>
</div>
</div>
</p>

<p>JsFiddle: <a href="https://jsfiddle.net/t01prhx4/" rel="nofollow">https://jsfiddle.net/t01prhx4/</a></p>