Note that there are some explanatory texts on larger screens.

plurals
  1. POWrap innerText in a HTML tag without affecting anything in else innerHTML
    text
    copied!<p>Sorry about the really crap title, it's difficult to explain. A simplified version... I have the following markup:</p> <pre><code>&lt;a href="http://www.someurl.com/product/collection"&gt;&lt;span class="collection"&gt;View&lt;/span&gt; this collection today.&lt;/a&gt; </code></pre> <p>Now, what i'm trying to end up with is the following:</p> <pre><code>&lt;a href="http://www.someurl.com/product/collection"&gt;&lt;span class="collection"&gt;View&lt;/span&gt; this &lt;span class="someClass"&gt;collection&lt;/span&gt; today.&lt;/a&gt; </code></pre> <p>And I can mostly do this with the following:</p> <pre><code>var $el = $('a'); var newHTML = $el.html().replace(/collection/g, '&lt;span class="someClass"&gt;collection&lt;/span&gt;'); $el.html(newHTML); </code></pre> <p>The problem is though, we end up with:</p> <pre><code>&lt;a href="http://www.someurl.com/product/collection"&gt;&lt;span class="&lt;span class="someClass"&gt;collection&lt;/span&gt;"&gt;View&lt;/span&gt; this &lt;span class="someClass"&gt;collection&lt;/span&gt; today.&lt;/a&gt; </code></pre> <p>Which obviously isn't what I want... Am I going about this arse about face? Should I be doing this a different way?</p> <p>This is a very simple example, the word might be something other than "collection" and might appear multiple times within the elements text. I have also tried using $.text() but the span tags get escaped, as you would expect, and appear as the text "collection".</p> <p>What am I missing?</p> <p>EDIT:</p> <p>I have edited the examples as they were completely wrong and not what I was asking about at all! Sorry!</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload