Can I use jQuery to change the contents of links on a page?
<p>I have HTML looking like this:</p>

<pre><code>&lt;div id="control"&gt;
    &lt;a href="/xx/x"&gt;y&lt;/a&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="/C003Q/x" class="dw"&gt;x&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="/C003R/xx" class="dw"&gt;xx&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="/C003S/xxx" class="dw"&gt;xxx&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>Is there a way using jQuery that I can easily change this HTML to look like the HTML below where every link has text that is enclosed in a <code>&lt;span&gt;</code> and where every
<code>href</code> is changed to <code>data-href</code>?</p>

<pre><code>&lt;div id="control"&gt;
    &lt;a data-href="/xx/x" &gt;&lt;span&gt;y&lt;/span&gt;&lt;/a&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a data-href="/C003Q/x" class="dw"&gt;&lt;span&gt;x&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a data-href="/C003R/xx" class="dw"&gt;&lt;span&gt;xx&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a data-href="/C003S/xxx" class="dw"&gt;&lt;span&gt;xxx&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;
</code></pre>
