Question

I need to change only the text inside the div, where there is other elements inside it. I tried the text method but it changed the whole content of the div.

Example div:

<div class="mydiv">
MY TEXT HERE
<ul>
   <li>BLAH</li>
   <li>BLAH</li>
</ul>
</div>

This is what I have tried for now: $(".mydiv").text("MY NEW TEXT");

Answer 1

$.fn.extend({
    text2: function(t){
        return this.each(function(a,b){
            $(b).contents().map(function(c,d){
                return (d.nodeType === 3 ? d : null);
            }).get(0).data = t;
        });
    }
});

There’s my solution. Only effects the first text node found within the selector, then replaces it with the supplied text. Using this, $('.mydiv').text2('MY NEW TEXT'); should work flawlessly.