title: Html Highlighting text with onmouseover when the text is created by button using onclick
body: <p>I am generating text after a user enters their name</p>
  <p>I want to be able to highlight the output of the entername() function. I'm able to highlight text but unsure how to do it to this specified output?</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>function entername() {
    var user = document.getElementById("username").value;
    document.body.append("Hey " + user);
  }
  
  function overgreeting() {
    document.getElementById("content").style.backgroundColor = "green";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;main&gt;
  
    &lt;input type="string" name="name" id="username"&gt;
    &lt;button title="Greet" onclick="entername()"&gt;
              Greet
          &lt;/button&gt;
  
  
    &lt;button onmouseover="overgreeting()"&gt; Test Button &lt;/button&gt;
    &lt;p id="content" onmouseover="entername"&gt; &lt;/p
  
  &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>