blocks|key|1082767|text|由于您无法修改链接，所以可以选择使用replace|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1082768|$("a").html($("a").html().replace("Some+text",+"Other+text"));|code-block|syntax|javascript|1082769|小提琴上的示例。|1082770|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/markcoleman/J5LHV/^0|I|7|0|0|0|3|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

Since you can't modify the link an option would be to simply use <code>replace</code>

<pre><code>$("a").html($("a").html().replace("Some text", "Other text"));
</code></pre>

Example on <a href="http://jsfiddle.net/markcoleman/J5LHV/" rel="noreferrer">jsfiddle</a>.

blocks|key|2280306|text|包装要在跨度内更改的文本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2280307|<a+href="link.html">Some+text+<img+src="image.jpg"+/></a>+

$('a+span').html(+'new+text'+);|code-block|syntax|javascript|2280308|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Wrap the text you want to change in a span 

<pre><code>&lt;a href="link.html"&gt;&lt;span&gt;Some text&lt;/span&gt; &lt;img src="image.jpg" /&gt;&lt;/a&gt; 

$('a span').html( 'new text' );
</code></pre>

blocks|key|1082809|text|另一种方法是按以下方式使用contents()方法：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1082810|给定的|1082811|<a+href="link.html">Some+text+<img+src="image.jpg"+/></a>|code-block|syntax|javascript|1082812|您可以用'Some+text'替换jQuery|1082813|var+text+=+$('a').contents().first()[0].textContent;
$('a').contents().first()[0].textContent+=+text.replace("Some+text",+"Other+text");|1082814|jsFiddle示例这里。|1082815|contents()的想法是受这问题的启发，由用户charlietfl回答。|1082816|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/dimitrios_87/cumgp2d5/|1|https://stackoverflow.com/questions/9956388/how-to-change-only-text-node-in-element^0|D|A|0|0|0|4|B|0|0|A|2|0|0|0|A|F|1|1|0^^$0|@$1|2|3|4|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|17|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|19|8|@$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1D|8|@]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|S|3|T|5|6|7|1H|8|@$9|1I|A|1J|B|C]]|D|@$9|1K|A|1L|1|1M]]|E|$]]|$1|U|3|-4|5|6|7|1N|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]|12|$5|X|Y|Z|E|$10|13]]]]

An alternative way would be to use the <code>contents()</code> method as follows:

Given

<pre><code>&lt;a href="link.html"&gt;Some text &lt;img src="image.jpg" /&gt;&lt;/a&gt;
</code></pre>

you can replace <code>'Some text'</code> with jQuery

<pre><code>var text = $('a').contents().first()[0].textContent;
$('a').contents().first()[0].textContent = text.replace("Some text", "Other text");
</code></pre>

jsFiddle example <a href="http://jsfiddle.net/dimitrios_87/cumgp2d5/" rel="noreferrer">here</a>.

The idea of <code>contents()</code> was inspired by <a href="https://stackoverflow.com/questions/9956388/how-to-change-only-text-node-in-element">this</a> question, answered by user charlietfl.

blocks|key|2639832|text|可以通过.contents()对其进行更改。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2639833|$('.yourElement').contents()[0].data+=+'New+Data';|code-block|syntax|javascript|2639834|在您的示例中，".data“是您的文本数据。|2639835|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can change it by .contents()

<pre><code>$('.yourElement').contents()[0].data = 'New Data';
</code></pre>

where in your case the "[0].data" is your text data

blocks|key|2280564|text|只需使用一些简单的js功能：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2280565|$(A).firstChild.nodeValue=“新文本”；|2280566|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

just use some plain js functionality:

$('a')[0].firstChild.nodeValue = "New Text";

blocks|key|2639662|text|试试这段代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2639663|$('a').live('click',+function(){
++++var+$img+=+$(this).find('img');+
++++$(this).text('changed');
++++$(this).append($img);
});|code-block|syntax|javascript|2639664|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

try this code 

<pre><code>$('a').live('click', function(){
 var $img = $(this).find('img'); 
 $(this).text('changed');
 $(this).append($img);
});
</code></pre>

blocks|key|1082835|text|一种高效、健壮的方法，不需要您知道内部元素是什么或文本是什么：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1082836|var+$a+=+$('a');
var+inner+=+'';
$a.children.html().each(function()+{
++++inner+=+inner+%2B+this.outerHTML;
});
$a.html('New+text'+%2B+inner);|code-block|syntax|javascript|1082837|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

An efficient and robust way that doesn't require you to know what the inner elements are or what the text is:

<pre><code>var $a = $('a');
var inner = '';
$a.children.html().each(function() {
 inner = inner + this.outerHTML;
});
$a.html('New text' + inner);
</code></pre>

blocks|key|1082746|text|您需要添加一个元素并更改该元素的文本，例如：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1082747|<a+href="link.html"><span+id="foo">Some+text<img+src="image.jpg"+/></a>|code-block|syntax|javascript|1082748|然后，您可以从jQuery调用：|1082749|$("#foo").html("Other+text");|1082750|你的结果将是：|1082751|<a+href="link.html"><span+id="foo">Other+text<img+src="image.jpg"+/></a>|1082752|entityMap^0|7|6|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|10|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|S|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|T|$]]

You'll need to add in a <code>&lt;span&gt;</code> element and change the text of that element, e.g.:

<pre><code>&lt;a href="link.html"&gt;&lt;span id="foo"&gt;Some text&lt;/span&gt;&lt;img src="image.jpg" /&gt;&lt;/a&gt;
</code></pre>

Then, you can call from jQuery:

<pre><code>$("#foo").html("Other text");
</code></pre>

And your result will effectively be:

<pre><code>&lt;a href="link.html"&gt;&lt;span id="foo"&gt;Other text&lt;/span&gt;&lt;img src="image.jpg" /&gt;&lt;/a&gt;
</code></pre>

blocks|key|2639690|text|这是我对jquery.uniform库所做的一个改进。特别是$.uniform.update()函数。我从acheong87那里学到了这个想法，并对它做了一些修改。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2639691|这样做的目的是在一个跨度内更改文本，但保留内部HTML和事件绑定。无需以这种方式存储和追加HTML。|2639692|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();
++++}
}|code-block|syntax|javascript|2639693|entityMap^0|U|I|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

This is an improvement I've made to the jquery.uniform library.
Specifically the <code>$.uniform.update()</code> function.
I took the idea from acheong87 and changed it a bit.

The idea is to change the text in a span but preserve the inner HTML and event bindings.
No need to store and append HTML this way.

<pre><code>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();
 }
}
</code></pre>

blocks|key|2280507|text|为此，我添加了一个jQuery函数。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2280508|您可能需要将html实体转换为文本表示，因此我添加了decodeEntities函数。|offset|length|style|CODE|2280509|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);
+}|code-block|syntax|javascript|2280510|用法示例$('selector').textOnly('some+text')|2280511|entityMap^0|0|Q|E|0|0|4|Z|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|U|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|V|8|@$D|W|E|X|F|G]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

I added a jQuery function for that need.

you may need to convert the html-entities to text representation, so i added <code>decodeEntities</code> function.

<pre><code>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 &gt; 0)
 $(this).html(decodeEntities($(this).html()).replace($(this).text(), n));
 return $(this);
 }
</code></pre>

Usage example
 <code>$('selector').textOnly('some text')</code>

blocks|key|1082910|text|我的通用版本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1082911|let+button+=+$('#yourElement');
button.html(button.html().replace(button[0].innerText,+"New+Text"));|code-block|syntax|javascript|1082912|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

My generic version: 

<pre><code>let button = $('#yourElement');
button.html(button.html().replace(button[0].innerText, "New Text"));
</code></pre>

blocks|key|1082981|text|更多元素和引文变化的缩写：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1082982|elemshtml+=+'';
$("a+*").each(function(){elemshtml+%2B=$(this)[0].outerHTML});
$("a").html('Some+text'+%2B+elemshtml);|code-block|syntax|javascript|1082983|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Shorthand for more elements and leading text to change:

<pre><code>elemshtml = '';
$("a *").each(function(){elemshtml +=$(this)[0].outerHTML});
$("a").html('Some text' + elemshtml);
</code></pre>

I would like to change the text of a HTML element but preserve the rest of the inner html with jQuery.

For instance:

<pre><code>&lt;a href="link.html"&gt;Some text &lt;img src="image.jpg" /&gt;&lt;/a&gt; 
</code></pre>

replace "Some text" with "Other text", and the result should look like:

<pre><code>&lt;a href="link.html"&gt;Other text &lt;img src="image.jpg" /&gt;&lt;/a&gt; 
</code></pre>

EDIT:
My current solution is following:

<pre><code>var aElem = $('a');
var children = aElem.children();

aElem.text("NEW TEXT");
aElem.append(children); 
</code></pre>

But there must be some more elegant way of doing this.

JQuery change inner text but preserve html

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我想更改HTML元素的文本，但是用jQuery保留其余的内部html。例如：<a href="link.html">Some text <img src="image.jpg" /></a> 将“某些文本”改为“其他文本”，其结果应该如下：<a href="link.html">Other text <img src="image.jpg" /></a> 编辑:我的当前解决方案如下：var aEl

问JQuery更改内部文本，但保留html。
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery更改内部文本，但保留html。EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问JQuery更改内部文本，但保留html。
EN