title: Add <span> to part of a label using jQuery
body: <p>I'm trying to add a span to only part of a label using jQuery. I'm able to isolate the section I want to add the span to (view my fiddle and inspect via the console), but now that I've got that, I don't know how to add the actual span. I need this in order to style a specific section of the label (in this case "red" as an example). Unfortunately, the markup is dynamically generated, so I can't just manually add it.</p>
  
  <p>Here's my <a href="http://jsfiddle.net/Currell/mmendnd4/2/" rel="nofollow noreferrer">fiddle</a>.</p>
  
  <p>Here are my watered-down code snippets if you'd prefer to view them here:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input type="checkbox" /&gt;&lt;label&gt; Some Number (XXXXXX1234)&lt;/label&gt;&lt;br /&gt;
  &lt;input type="checkbox" /&gt;&lt;label&gt; Some Other Number (XXXXXX4567)&lt;/label&gt;&lt;br /&gt;
  &lt;input type="checkbox" /&gt;&lt;label&gt; Some Number (XXXXXX7890)&lt;/label&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>span {
      color: red;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var label = $('label');
  
  $.each(label, function() {
  
      var arr = $(this).text().split(' '),
          num = arr[arr.length-1];
  
      console.log(num);
  
  });
  </code></pre>
  
  <p>This is what I'm starting with:</p>
  
  <pre><code>&lt;input type="checkbox" /&gt;&lt;label&gt; Some Number (XXXXXX1234)&lt;/label&gt;&lt;br /&gt;
  </code></pre>
  
  <p>And this is what I'm trying to achieve:</p>
  
  <pre><code>&lt;input type="checkbox" /&gt;&lt;label&gt; Some Number &lt;span&gt;(XXXXXX1234)&lt;/span&gt;&lt;/label&gt;&lt;br /&gt;
  </code></pre>
  
  <p>There will by multiple inputs throughout the site, hence $.each.</p>
  
  <p>I've found partial answers to this dilemma on Stack Overflow, just not the right combination to complete the task.</p>