如何更改元素的文本而不更改其子元素？
我想dynamic更新元素的文本：
<div> **text to change** <someChild> text that should not change </someChild> <someChild> text that should not change </someChild> </div> 我是新来的jQuery，所以这个任务似乎对我来说是相当具有挑战性的。 有人可以指向一个函数/select器使用？
如果可能的话，我想这样做，而不需要为需要更改的文本添加新的容器。
马克用jQuery有了更好的解决scheme ，但是你也可以在普通的JavaScript中做到这一点。
在JavaScript中， childNodes属性为您提供了元素的所有子节点，包括文本节点。
所以，如果你知道你想要改变的文本总是成为元素的第一个东西，那么给这个HTML：
<div id="your_div"> **text to change** <p> text that should not change </p> <p> text that should not change </p> </div>
你可以这样做：
var your_div = document.getElementById('your_div'); var text_to_change = your_div.childNodes[0]; text_to_change.nodeValue = 'new text';
当然，你仍然可以使用jQuery来首先select<div> （即var your_div = $('your_div').get(0); ）。
$("div").contents().filter(function(){ return this.nodeType == 3; }).filter(':first').text("change text");
资料来源： http ： //api.jquery.com/contents/
更新2017（adrach）：自从发布以来，看起来有几件事情发生了变化。 这是一个更新的版本
$("div").contents().filter(function(){ return this.nodeType == 3; }).first().replaceWith("change text");
请参阅在行动
标记：
$(function() { $('input[type=button]').one('click', function() { var cache = $('#parent').children(); $('#parent').text('Altered Text').append(cache); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="parent">Some text <div>Child1</div> <div>Child2</div> <div>Child3</div> <div>Child4</div> </div> <input type="button" value="alter text" />
<div id="divtochange"> **text to change** <div>text that should not change</div> <div>text that should not change</div> </div>
$(document).ready(function() { $("#divtochange").contents().filter(function() { return this.nodeType == 3; }) .replaceWith("changed text"); });
这只会改变第一个文本节点
只需将要更改的文本用一个类来包装即可。
不一定回答你所问的问题，但可能是更好的编码习惯。 保持干净和简单的事情
<div id="header"> <span class="my-text">**text to change**</span> <div> text that should not change </div> <div> text that should not change </div> </div>
瞧！
$('#header .mytext').text('New text here')
对于你提到的具体情况：
<div id="foo"> **text to change** <someChild> text that should not change </someChild> <someChild> text that should not change </someChild> </div>
这很简单：
var div = document.getElementById("foo"); div.firstChild.data = "New text";
你没有说明你想如何概括这个。 例如，如果要更改<div>第一个文本节点的文本，可以这样做：
var child = div.firstChild; while (child) { if (child.nodeType == 3) { child.data = "New text"; break; } child = child.nextSibling; }
这是另一种方法： http : //jsfiddle.net/qYUBp/7/
HTML
<div id="header"> **text to change** <div> text that should not change </div> <div> text that should not change </div> </div>
JQUERY
var tmp=$("#header>div").html(); $("#header").text("its thursday").append(tmp);
$.fn.textPreserveChildren = function(text) { return this.each(function() { return $(this).contents().filter(function() { return this.nodeType == 3; }).first().replaceWith(text); }) } setTimeout(function() { $('.target').textPreserveChildren('Modified'); }, 2000);
.blue { background: #77f; } .green { background: #7f7; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="target blue">Outer text <div>Nested element</div> </div> <div class="target green">Another outer text <div>Another nested element</div> </div>
我想你正在寻找.prependTo（）。
http://api.jquery.com/prependTo/
我们也可以在页面上select一个元素并将其插入到另一个元素中：
$（ 'H2'）prependTo（$（ '容器'））;
如果以这种方式select的元素被插入其他地方，它将被移动到目标（不克隆）：
<div class="container"> <h2>Greetings</h2> <div class="inner">Hello</div> <div class="inner">Goodbye</div> </div>
如果有多个目标元素，则会在第一个目标之后为每个目标创build插入元素的复制副本。
简单的回答：
$("div").contents().filter(function(){ return this.nodeType == 3; })[0].nodeValue = "The text you want to replace with"
马克答案的问题是，你也得到空文本节点。 解决scheme作为jQuery插件：
$.fn.textnodes = function () { return this.contents().filter(function (i,n) { return n.nodeType == 3 && n.textContent.trim() !== ""; }); }; $("div").textnodes()[0] = "changed text";
这是一个古老的问题，但你可以做一个简单的function，让你的生活更轻松：
$.fn.toText = function(str) { var cache = this.children(); this.text(str).append(cache); }
例：
<div id="my-div"> **text to change** <p> text that should not change </p> <p> text that should not change </p> </div>
用法：
$("#my-div").toText("helloworld");
