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

在一个范围内包裹你好世界

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

Answer 2

.text()函数会替换H1标记中的所有内容，因此会从DOM中删除span标记。

您可以使用jquery附加跨度，如下面的小提示：

http://jsfiddle.net/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>");
});

Answer 3

添加另一个div或span，如下所示：

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

}）;

Answer 4

如果更改H1，则小文本会消失，因为它是H1的一部分。添加额外的div或跨度并不好。保持你的html苗条！

仅更改h1文字：

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

仅更改小文字：

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

改变两者：

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

Answer 5

相反，您应该在替换文本之前将其缓存在var中：

$(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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id='h1id'>
    Hello World
    <br>
    <small id='smallid'>Here I am!</small>
</h1>

Bootstrap：改变小文本

5 个答案: