jQuery JQuery更改内部文本但保留html
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5232862/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery change inner text but preserve html
提问by Drejc
I would like to change the text of a HTML element but preserve the rest of the inner html with jQuery.
我想更改 HTML 元素的文本，但使用 jQuery 保留内部 html 的其余部分。
For instance:
例如：
<a href="link.html">Some text <img src="image.jpg" /></a>
replace "Some text" with "Other text", and the result should look like:
将“某些文本”替换为“其他文本”，结果应如下所示：
<a href="link.html">Other text <img src="image.jpg" /></a>
EDIT: My current solution is following:
编辑：我目前的解决方案如下：
var aElem = $('a');
var children = aElem.children();
aElem.text("NEW TEXT");
aElem.append(children);
But there must be some more elegant way of doing this.
但是必须有一些更优雅的方式来做到这一点。
采纳答案by Brandon Boone
This seems to work just fine.
这似乎工作得很好。
<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>
回答by Mark Coleman
回答by meouw
Wrap the text you want to change in a span
将要更改的文本换行
<a href="link.html"><span>Some text</span> <img src="image.jpg" /></a>
$('a span').html( 'new text' );
回答by Andrew Cheong
My solution, though a little late.
我的解决方案，虽然有点晚。
$('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));
}
}
});
Some notes:
一些注意事项：
contents()includes text nodes, unlikechildren().- It is necessary to create a copyof the contents via
var contents = ...or else the remaining elements are lost forever once replaced by$(this).html('NEW TEXT'). - The
lengthcheck is optional but recommended. - The
nodeTypecheck is optional but recommended.
contents()包括文本节点，不像children().- 有必要通过创建内容的副本，
var contents = ...否则一旦被替换，剩余的元素将永远丢失$(this).html('NEW TEXT')。 - 该
length检查是可选的，但建议进行。 - 该
nodeType检查是可选的，但建议进行。
回答by jim_kastrin
An alternative way would be to use the contents()method as follows:
另一种方法是使用该contents()方法，如下所示：
Given
给定的
<a href="link.html">Some text <img src="image.jpg" /></a>
you can replace 'Some text'with jQuery
你可以'Some text'用jQuery替换
var text = $('a').contents().first()[0].textContent;
$('a').contents().first()[0].textContent = text.replace("Some text", "Other text");
jsFiddle example here.
jsFiddle 示例在这里。
The idea of contents()was inspired by thisquestion, answered by user charlietfl.
的想法contents()受到这个问题的启发，由用户 charlietfl 回答。
回答by Darryl Ceguerra
You can change it by .contents()
您可以通过 .contents() 更改它
$('.yourElement').contents()[0].data = 'New Data';
where in your case the "[0].data" is your text data
在您的情况下，“[0].data”是您的文本数据
回答by Drea58
just use some plain js functionality:
只需使用一些简单的 js 功能：
$('a')[0].firstChild.nodeValue = "New Text";
$('a')[0].firstChild.nodeValue = "新文本";
回答by anthonygore
An efficient and robust way that doesn't require you to know what the inner elements are or what the text is:
一种不需要您知道内部元素是什么或文本是什么的高效而强大的方法：
var $a = $('a');
var inner = '';
$a.children.html().each(function() {
inner = inner + this.outerHTML;
});
$a.html('New text' + inner);
回答by diEcho
try this code
试试这个代码
$('a').live('click', function(){
var $img = $(this).find('img');
$(this).text('changed');
$(this).append($img);
});
回答by Brian Driscoll
You'll need to add in a <span>element and change the text of that element, e.g.:
您需要添加一个<span>元素并更改该元素的文本，例如：
<a href="link.html"><span id="foo">Some text</span><img src="image.jpg" /></a>
Then, you can call from jQuery:
然后，您可以从 jQuery 调用：
$("#foo").html("Other text");
And your result will effectively be:
你的结果将有效地是：
<a href="link.html"><span id="foo">Other text</span><img src="image.jpg" /></a>
