如何仅更改元素中的文本节点[重复]答案

【问题标题】：How to change only text node in element [duplicate]如何仅更改元素中的文本节点[重复]
【发布时间】：2023-03-30 16:52:02
【问题描述】：

我有下一个 html：

<label for="user_name">
  <abbr title="required">*</abbr>
  Name
</label>

我想用 jquery 将标签标题更改为 Title。所以我愿意

$('label[for=user_name]').html('Title')

并且它替换了所有内部html（包括abbr标签）

那么，仅替换 Name 的最简单方法是什么？

【问题讨论】：

标签： javascript html jquery

【解决方案1】：

如果您使用contents() 方法，它也会返回文本节点。由于 jQuery 没有文本节点方法，因此将最后一个节点转换为 DOM 节点

$('label[for="user_name"]').contents().last()[0].textContent='Title';

演示：http://jsfiddle.net/yPAST/1/

【讨论】：

有趣..我每个输入只有一个标签，所以它适合我
注意：textContent 属性在 9 版之前的 IE 中不可用。

【解决方案2】：

抱歉，回复晚了……但这里有一种只使用 jQuery 的方法：

$('label').contents().last().replaceWith('Title');

【讨论】：

你拯救了这一天。谢谢:)
请注意，replaceWith 的字符串被视为 HTML；如果它包含标签，它将被解析为 DOM 元素。
这些答案很好，所以 +1，但是像这样导航 DOM 很脆弱。使用 jQuery 时最好避免使用 .first()、.last()、.prev()、.next() 等。

【解决方案3】：

It may not be the prettiest way, but this works:

var $label = $('label[for=user_name]');
$label.html($label.html().replace("Name", "Title"));

【讨论】：

哎呀！！我已经发布了相同的答案..迟到了:(

【解决方案4】：

您可以只选择abbr 元素，存储它，然后用存储的元素加上更改后的标题替换整个内容：

$('label[for="user_name"]').each(function(){
   var a = $(this).children('abbr');
   $(this).html(a).append('Title');
});

看到这个fiddle

【讨论】：

【解决方案5】：

您可以使用replace 完成此操作

  var html = $('label[for=user_name]').html().replace('Name','Testing');
  $('label[for=user_name]').html(html);

检查一下：http://jsfiddle.net/DyzMJ/

【讨论】：

【解决方案6】：

将 Evans 解决方案添加到 jquery fn 以使其使用舒适：

// get/change node content not children
jQuery.fn.content = function( n ){
    var o = $(this).clone();
    var c = o.children().remove();
    if (typeof n === "string" ){
        o.html(n);
        $(this).html(c).append(n);
    }
    return o.html();
}

用法：$('myselector').content('NewContentString');

【讨论】：

【解决方案7】：

这是适用于大多数浏览器的解决方案

$('label[for="user_name"]').contents().last()[0].nodeValue = 'Title';

这个很接近，但在 ie8 中出现了问题，因为 textContent 不受支持

$('label[for="user_name"]').contents().last()[0].textContent='Title';

【讨论】：

注意：textContent 属性在 9 版之前的 IE 中不可用。

【解决方案8】：

如果你操作超过 1 个标签，你可以选择每个标签并用 jquery 替换文本：

$('label[for="user_name"]').contents().last().replaceWith("Title");

对于第二个标签：

$('label[for="user_lastname"]').contents().last().replaceWith("Title2");

等等……

【讨论】：