replace <a> with <button> for one instance using JS : <p>I have code that is automatically generated and would like to replace  with .</p>

<pre><code>&lt;ul&gt;
 &lt;li&gt;&lt;a href="#"&gt;link 1&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;link 2&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
 var $button = $('&lt;button /&gt;');
 $('li:first-child a').replaceWith($button);
&lt;/script&gt;
</code></pre>

<p>Any help would be greatly appreciated. I only want to change link 2 to a button.</p>
