I have the following issue with Twitter Bootstrap and jQuery:

I have a title, in h1, and a subtitle, in small. I want to change the text of both, using jQuery. My code is the following:

HTML:

<h1 id='h1id'>
    Hello World
    <br>
    <small id='smallid'>Here I am!</small>
</h1>

JavaScript:

$(document).ready( function() {

    $('#h1id').text('I can change this');
    $('#smallid').text('But not this');

});

The h1 is changed, but the small-element disappears. How can I fix this?

Live example here

I have the following issue with Twitter Bootstrap and jQuery:

I have a title, in h1, and a subtitle, in small. I want to change the text of both, using jQuery. My code is the following:

HTML:

<h1 id='h1id'>
    Hello World
    <br>
    <small id='smallid'>Here I am!</small>
</h1>

JavaScript:

$(document).ready( function() {

    $('#h1id').text('I can change this');
    $('#smallid').text('But not this');

});

The h1 is changed, but the small-element disappears. How can I fix this?

Live example here

• javascript
• jquery
• html

• 3 Its because your #h1id contains the #smallid, so when you change the content of the #h1id element, you delete the #smallid. ;) – DNReNTi Commented Feb 27, 2015 at 9:27
• For more details, Once you change #h1id then right click and view Inspect element. Now its overrided by your text I can change this – Ranjith Commented Feb 27, 2015 at 9:32

5 Answers 5

Wrap hello world in a span

HTML

<h1 id='h1id'>
    <span>Hello World</span>
    <br>
    <small>Here I am!</small>
</h1>

JavaScript

$(document).ready( function() {
    $('#h1id span').text('I can change this');
    $('#h1id small').text('But not this');
});

Add another div or span like this :

<h1 id='h1id'>
    <div id="something">
        Hello World
    </div>
    <br>
    <small id='smallid'>Here I am!</small>
</h1>

$(document).ready( function() {

$('#h1id #something').text('I can change this');
$('#h1id #smallid').text('But not this');

});

The .text() function replaces all content in the H1 tag therefore removing the span tag from the DOM.

You can append the span with jquery like the following fiddle shows:

http://jsfiddle/nkzbzm7f/1/

html

<h1 id='h1id'>
    Hello World
</h1>

javascript

$(document).ready( function() {
    $('#h1id').text('I can change this')
    .append("<br>")
    .append("<small>Here I am!</small>");
});

If you change the H1 the small text disappears because it's part of the H1. Adding extra divs or spans isn't nice. keep your html slim!

change h1 text only:

$('#h1id').html('new text<br><small>' + $('#h1id small').html() + '</small>' );

change small text only:

$('#h1id small').text('new text');

change both:

$('#h1id').html('new test<br><small>new also</small>');

Instead you should cache it in a var before replacing the text:

$(document).ready( function() {
    var smallid = $('#smallid'); // cache it here.
    $('#h1id').text('I can change this. ');
    smallid.text('changed').appendTo('#h1id'); // now change and append it again.

});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id='h1id'>
    Hello World
    <br>
    <small id='smallid'>Here I am!</small>
</h1>