javascript - Bootstrap : Change text of small

Question

我在使用 Twitter Bootstrap 和 jQuery 时遇到以下问题:

我有一个标题，采用 h1 格式，还有一个副标题，采用 small 格式。我想使用 jQuery 更改两者的文本。我的代码如下:

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');

});

h1 已更改，但 small 元素消失。我该如何解决这个问题？

实例here

Answer 1

将 hello world 包裹在一个跨度中

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');
});