title: Inserting font awesome icon using JavaScript
body: <p>I am working on a WordPress site using a jobs application plugin. I want to add a font awesome icon to a button using javascript. The hml code I can see for the button is.</p>
  
  <pre><code>&lt;input type = "button" class="application_button button" value="apply for job"&gt;&lt;/input&gt;
  </code></pre>
  
  <p>which I think I need to make the following for the icon to show.</p>
  
  <pre><code>&lt;input type = "button" class="application_button button" value="apply for job"&gt; &lt;i class = "fas fa-chevron-right"&gt;&lt;/i&gt;&lt;/input&gt;
  </code></pre>
  
  <p>the JavaScript I have added to achieve this is,</p>
  
  <pre><code> var d1 = document.querySelector('.application_button');
  d1.insertAdjacentHTML('beforeend', '&lt;i class="fas fa-chevron-right"&gt;&lt;/i&gt;');
  </code></pre>
  
  <p>When I console.log(d1); I can see that I have got the code I want. But the icon does not show. If I use 'afterend' then I do see the icon, but outside the button.</p>
  
  <p>I seem so close, but so far away.</p>
  
  <p>Any advice?</p>