title: How to prevent XSS in the following code?
body: <p>I wrote some code in HTML5 + Javascript, that when a User enters his name in User, then it gets reflected back like "<code>Hello &lt;user&gt;</code>" .Now this script is vulnerable to XSS (Cross site scripting).</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"/&gt;
  &lt;title&gt;Forms Welcome&lt;/title&gt;
  
  &lt;script&gt;
  function write_name(){
  
      var welcome_parra = document.getElementById('welcome');
      var name =  document.getElementById('name');
      welcome_parra.innerHTML = "welcome " + name.value;
  }
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;p id="welcome"&gt;&lt;/p&gt;
      &lt;form&gt;
          Username: &lt;input type="text" name="username" maxlength="20" id="name"/&gt;
          &lt;input type="button" value="done"onclick="write_name();"&gt;
      &lt;/form&gt;
   /body&gt;
  
  &lt;/title&gt;
  </code></pre>
  
  <p>Now, when I enter the payload <code>"&gt;&lt;img src=x onerror=prompt(404)&gt;</code>, I get a prompt of XSS. So how do I rectify it? </p>
  
  <p>Can anyone please check the host, try and patch the bug and give me a reason?</p>