只用 jQuery 替换 html 元素的文本内容，保留 font awesome i 标签

Question

这里是测试用例：
 Loading map... 

我正在尝试动态地（通过 jQuery ）更改仅此标记的 "Loading map..." 部分。我意识到我每次都可以重建整个内部内容，合并和替换  但我很想知道是否有支持的 api 方法。

我认为 $('#loading').text('new message') 会起作用，但它删除了  标签。

Answer 1

您可以使用 .filter() 方法解决此问题，例如：

$('#loading').contents().filter(function() {
    return this.nodeType === 3
}).each(function(){
    this.textContent = this.textContent.replace('Loading map...','new message');
});

简单演示：

$('#loading').contents().filter(function() {
    return this.nodeType === 3
}).each(function(){
    this.textContent = this.textContent.replace('Loading map...','new message here...');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<span id='loading' class="pad"> <i class="fa fa-spinner fa-pulse fa-lg fa-fw"></i> Loading map... </span>

如果您检查浏览器控制台，您会发现  元素仍然存在，只是没有显示在这里，因为此处不包含 font-awesome。（编辑：也添加了 fa css。）

Answer 2

您可以使用获取文本节点的对象并使用 textContent 设置内容：

$('#loading').contents().last()[0].textContent='new message';

$('#loading').contents().last()[0].textContent='new message';

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='loading' class="pad"> <i class="fa fa-spinner fa-pulse fa-lg fa-fw"></i> Loading map... </span>

Answer 3

function changeText(newText){
curI = $('#loading > i')[0].outerHTML;
$('#loading').html(curI + newText);
}

changeText('Hey. I am the new text');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<span id='loading' class="pad"> <i class="fa fa-spinner fa-pulse fa-lg fa-fw"></i> Loading map... </span>

顺便说一句，如果你可以将可更改的文本包裹在另一个标签中，那么，你可以直接更改它而不管父级。

Answer 4

如果您要做的是替换所有未包含在任何子元素中的文本，我能看到的最通用的方法是将元素的内容设置为其子元素（省略文本-仅内容），然后附加所需的文本，如下所示：

$('#loading').html($('#loading').children()).append('new message');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='loading' class="pad">
  <div>static element of any kind</div>
  text to replace
</span>

但是，最直接的方法是从一开始就定义一个元素，然后为其设置新内容。

$('#message').text('new message');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id='loading' class="pad">
  <div>static element of any kind</div>
  <div id="message">text to replace</div>
</span>

只用 jQuery 替换 html 元素的文本内容，保留 font awesome i 标签

Replace only text contents of html element with jQuery, preserving font awesome i tags

jquery

font-awesome