Jquery: Change first word Color Span Issue
<p>I am trying to change first color of define class or tag by using jquery. Things work fine but I have one title having own span and giving trouble. I am using below code to add span element and inline style for first word.</p>

<pre><code>$(document).ready(function()
{

    $('.header-logo, h1').each(function() {
        var h = $(this).html();
        var index = h.indexOf(' ');
        if(index == -1) {
            index = h.length;
        }
        $(this).html('&lt;span style="color:black;"&gt;' + h.substring(0, index) + '&lt;/span&gt;' + h.substring(index, h.length));
    });

});
</code></pre>

<p>This is adding span tag perfectly and change the color too. But I have one title with below html structure</p>

<pre><code>&lt;h1&gt;
    &lt;span id="fav" class="btn-fav"&gt;&lt;a href="#"Add to fav&lt;/a&gt;&lt;/span&gt;
    &lt;span class="the-title"&gt;Title text goes here&lt;/span&gt;
&lt;/h1&gt;
</code></pre>

<p>Here I want to add color only for "Title text goes here" first word (Title) but the javascript breaking structure by adding another span tag into the span tag something like below</p>

<pre><code>&lt;span style="color:black;"&gt;
&lt;span&lt; span=""&gt; class="btn-fav id="fav"&gt;.....
</code></pre>

<p>So how can I resolve this issue?</p>
