我想更改 HTML 元素的文本，但使用 jQuery 保留内部 html 的其余部分。
例如：
<a href="link.html">Some text <img src="image.jpg" /></a>
将“Some text”替换为“Other text”，结果应如下所示：
<a href="link.html">Other text <img src="image.jpg" /></a>
编辑： 我目前的解决方案如下：
var aElem = $('a');
var children = aElem.children();
aElem.text("NEW TEXT");
aElem.append(children);
但是必须有一些更优雅的方式来做到这一点。
【问题讨论】：
标签： jquery
这似乎工作得很好。
<html>
<head>
</head>
<body>
<a href="link.html">Some text <img src="img.jpg" /></a>
</body>
</html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var $link = $('a');
var $img = $link.find('img');
$link.html('New Text');
$link.append($img);
});
</script>
【讨论】：
$link.children('img') 而不是find() 方法，因为您想要直接的孩子。使用find() 搜索孙辈。
<a> 标记内的 HTML，此解决方案就可以正常工作。否则，您将不得不再次添加这些侦听器。
由于您无法修改链接，因此您可以选择简单地使用 replace
$("a").html($("a").html().replace("Some text", "Other text"));
jsfiddle 上的示例。
【讨论】：
<a><img/>Some text<img/> </a> 带有分离/重新连接的结果是 <a>Other Text<img/><img/></a>，而使用简单的替换来维护结构。
<img> 标签包含Some text 怎么办？？
将要更改的文本包装在一个跨度中
<a href="link.html"><span>Some text</span> <img src="image.jpg" /></a>
$('a span').html( 'new text' );
【讨论】：
我的解决方案，虽然有点晚了。
$('a').each(function() {
var contents = $(this).contents();
if (contents.length > 0) {
if (contents.get(0).nodeType == Node.TEXT_NODE) {
$(this).html('NEW TEXT').append(contents.slice(1));
}
}
});
一些注意事项：
contents() 包括文本节点，与 children() 不同。var contents = ... 创建内容的副本，否则一旦被$(this).html('NEW TEXT') 替换，其余元素将永远丢失。length 检查是可选的，但建议使用。nodeType 检查是可选的，但建议使用。【讨论】：
另一种方法是使用contents() 方法，如下所示：
给定
<a href="link.html">Some text <img src="image.jpg" /></a>
你可以用 jQuery 替换 'Some text'
var text = $('a').contents().first()[0].textContent;
$('a').contents().first()[0].textContent = text.replace("Some text", "Other text");
jsFiddle 示例here.
contents() 的想法灵感来自this 问题，由用户 charlietfl 回答。
【讨论】：
你可以通过 .contents() 来改变它
$('.yourElement').contents()[0].data = 'New Data';
在您的情况下，“[0].data”是您的文本数据
【讨论】：
只需使用一些简单的 js 功能：
$('a')[0].firstChild.nodeValue = "新文本";
【讨论】：
试试这个代码
$('a').live('click', function(){
var $img = $(this).find('img');
$(this).text('changed');
$(this).append($img);
});
【讨论】：
一种高效且稳健的方式，不需要您知道内部元素是什么或文本是什么：
var $a = $('a');
var inner = '';
$a.children.html().each(function() {
inner = inner + this.outerHTML;
});
$a.html('New text' + inner);
【讨论】：
您需要添加 <span> 元素并更改该元素的文本，例如：
<a href="link.html"><span id="foo">Some text</span><img src="image.jpg" /></a>
然后，你可以从 jQuery 调用：
$("#foo").html("Other text");
你的结果将是：
<a href="link.html"><span id="foo">Other text</span><img src="image.jpg" /></a>
【讨论】：
这是我对 jquery.uniform 库所做的改进。
特别是$.uniform.update() 函数。
我从acheong87那里得到了这个想法并稍微改变了它。
这个想法是在一个范围内更改文本，但保留内部 HTML 和事件绑定。 无需以这种方式存储和附加 HTML。
if ($e.is("input[type=button]")) {
spanTag = $e.closest("span");
var contents = spanTag.contents();
if (contents.length) {
var text = contents.get(0);
// Modern browsers support Node.TEXT_NODE, IE7 only supports 3
if (text.nodeType == 3)
text.nodeValue = $e.val();
}
}
【讨论】：
我为这个需要添加了一个 jQuery 函数。
您可能需要将 html-entities 转换为文本表示，所以我添加了decodeEntities 函数。
function decodeEntities(encodedString) {
if (typeof encodedString != "string") return encodedString;
if (!encodedString) return "";
var textArea = document.createElement('textarea');
textArea.innerHTML = encodedString;
return textArea.value;
}
jQuery.fn.textOnly = function(n) {
if (this.length > 0)
$(this).html(decodeEntities($(this).html()).replace($(this).text(), n));
return $(this);
}
使用示例
$('selector').textOnly('some text')
【讨论】：
我的通用版本：
let button = $('#yourElement');
button.html(button.html().replace(button[0].innerText, "New Text"));
【讨论】：
更多元素和要更改的前导文本的简写：
elemshtml = '';
$("a *").each(function(){elemshtml +=$(this)[0].outerHTML});
$("a").html('Some text' + elemshtml);
【讨论】：