title: How to dynamically add a <strong> tag with a specific class to <div> in javascript
body: <p>Below is a <code>div</code> which will be shown on a call to the javascript function <code>onmouseoveragent</code>. 
  I need a name and phone number to be shown inside the div. I managed to show the name dynamically, but don't know how to add the Phone and specify its class in my function.</p>
  
  <pre><code>&lt;div id="visit"&gt;
      &lt;div id="name" class="Class1"&gt;
          &lt;strong class="Class2"&gt;Phone: 0123456789
          &lt;/strong&gt; &lt;%--need this to be added dynamically--%&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;script language="javascript" type="text/javascript"&gt;
      function onmouseoveragent(e) {
  
          var hint = document.getElementById("visit");
          var inner = document.getElementById("name");
  
          inner.appendChild(inner.ownerDocument.createTextNode("I am a name!"))      
          while (inner.childNodes.length &gt; 1) {
              inner.removeChild(inner.firstChild);
          }
  
          console.log(hint);
          hint.style.display = 'block';
  
          hint.style.top = Math.max(el.offsetTop - hint.offsetHeight, 0) + "px";
          hint.style.left = el.offsetLeft + "px";
      };
  &lt;/script&gt;
  </code></pre>