change the text in the <h2> without change the span the same h2 tag

Question

I want to change the text without change the span. I tried this one the text is changed but the span was removed.

 <div class="c1"> <h2> "here" <span class="span1">X</span></h2></div>

is there any way to change the text without any change in the span content using jQuery.

Answer 1

jsFiddle : https://jsfiddle.net/CanvasCode/y6p6xzfx/

$(function () {
    $span = $('h2').find('span')
    $('h2').text("Hello");
    $('h2').append($span);
});

Take a copy of your span, update the h2 text and then append the span back to your h2 tag.

---

Forgot to filter by the c1 div class. here is the updated code

jsFiddle https://jsfiddle.net/CanvasCode/y6p6xzfx/1/

$(function () {
    $div = $('.c1');
    $h2 = $div.find('h2');
    $span = $h2.find('span')
    $h2.text("Hello");
    $h2.append($span);
});

Also you don't need to store all of the elements. I was just doing this to make the code clearer to read and understand.