如何在不更改其子元素的情况下更改元素的文本？

小开

我想你是在找。

Http://api.jquery.com/prependto/

元素上选择一个元素页面，并插入到另一个:

$(‘ h2’) . preendTo ($(‘ . container’)) ;

如果以这种方式选择的元素是插入其他地方，它将被移动进入目标(非克隆) :

<div class="container">
<h2>Greetings</h2>
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>

如果有多个目标元素的克隆副本插入的元素将创建用于每个目标在第一个之后。

小开

最佳答案

Mark 使用 jQuery 提供了一个更好的解决方案，但是您也可以在常规 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 选择 <div>(即 var your_div = $('your_div').get(0);)。

小开

2018年最新情况

因为这是一个非常流行的答案，所以我决定将 textnode 选择器作为一个插件添加到 jQuery 中，对它进行一些更新和美化。

在下面的代码片段中，您可以看到我定义了一个新的 jQuery 函数，该函数可以获取所有(并且只有) textNodes。您也可以使用例如 first()函数对此函数进行链接。我对文本节点进行了修剪，并检查修剪后它是否不是空的，因为空格、制表符、新行等也被识别为文本节点。如果您也需要这些节点，那么可以在 jQuery 函数的 If 语句中删除这些节点。

我添加了一个示例，说明如何替换第一个文本节点以及如何替换所有文本节点。

这种方法使得阅读代码变得更加容易，并且更容易多次使用它，而且具有不同的用途。

如果你喜欢的话，2017年最新情况(adrach)仍然可以工作。

作为 jQuery 扩展

//Add a jQuery extension so it can be used on any jQuery object
jQuery.fn.textNodes = function() {
return this.contents().filter(function() {
return (this.nodeType === Node.TEXT_NODE && this.nodeValue.trim() !== "");
});
}


//Use the jQuery extension
$(document).ready(function(){
$('#replaceAll').on('click', () => {
$('#testSubject').textNodes().replaceWith('Replaced');
});


$('#replaceFirst').on('click', () => {
$('#testSubject').textNodes().first().replaceWith('Replaced First');
});
});

p {
margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testSubject">
**text to change**
<p>text that should not change</p>
<p>text that should not change</p>
**also text to change**
<p>text that should not change</p>
<p>text that should not change</p>
**last text to change**
</div>
<button id="replaceFirst">Replace First</button>
<button id="replaceAll">Replace All</button>

等效的 Javascript (ES)

//Add a new function to the HTMLElement object so it can be used on any HTMLElement
HTMLElement.prototype.textNodes = function() {
return [...this.childNodes].filter((node) => {
return (node.nodeType === Node.TEXT_NODE && node.nodeValue.trim() !== "");
});
}


//Use the new HTMLElement function
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('#replaceAll').addEventListener('click', () => {
document.querySelector('#testSubject').textNodes().forEach((node) => {
node.textContent = 'Replaced';
});
});


document.querySelector('#replaceFirst').addEventListener('click', function() {
document.querySelector('#testSubject').textNodes()[0].textContent = 'Replaced First';
});
});

p {
margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testSubject">
**text to change**
<p>text that should not change</p>
<p>text that should not change</p>
**also text to change**
<p>text that should not change</p>
<p>text that should not change</p>
**last text to change**
</div>
<button id="replaceFirst">Replace First</button>
<button id="replaceAll">Replace All</button>

2017年最新情况(adrach) :

自从这篇文章发布以来，似乎有几处地方发生了变化

$("div").contents().filter(function(){ return this.nodeType == 3; }).first().replaceWith("change text");

原始答案(不适用于当前版本)

$("div").contents().filter(function(){ return this.nodeType == 3; })
.filter(':first').text("change text");

资料来源: http://api.jquery.com/contents/

小开

行动中见

标价:

$(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="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;
}

小开

<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").contents().filter(function(){
return this.nodeType == 3;
})[0].nodeValue = "The text you want to replace with"

小开

这里是 还没有的另一种方法: http://jsfiddle.net/qYUBp/7/

超文本标示语言

<div id="header">
**text to change**
<div>
text that should not change
</div>
<div>
text that should not change
</div>
</div>

查询

var tmp=$("#header>div").html();
$("#header").text("its thursday").append(tmp);

小开

只需将要更改的文本包装在跨度中，并选择一个类即可。

不一定回答你的问题，我知道，但是，可能是一个更好的编码实践。保持事情干净和简单

<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')

小开

Mark 的回答的问题在于你得到的文本节点也是空的。 jQuery 插件解决方案:

$.fn.textnodes = function () {
return this.contents().filter(function (i,n) {
return n.nodeType == 3 && n.textContent.trim() !== "";
});
};


$("div").textnodes()[0] = "changed text";

小开

$.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>

小开

这是一个古老的问题，但是你可以做一个像这样的简单的函数来使你的生活更容易:

$.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");

小开

这里有很多很棒的答案，但是它们只处理一个带子节点的文本节点。在我的例子中，我需要对所有的文本节点进行操作，忽略 html 子节点，但是保留顺序。

如果我们有这样一个案例:

<div id="parent"> Some text
<div>Child1</div>
<div>Child2</div>
and some other text
<div>Child3</div>
<div>Child4</div>
and here we are again
</div>

我们可以使用下面的代码来修改文本，只保留顺序

    $('#parent').contents().filter(function() {
return this.nodeType == Node.TEXT_NODE && this.nodeValue.trim() != '';
}).each(function() {
//You can ignore the span class info I added for my particular application.
$(this).replaceWith(this.nodeValue.replace(/(\w+)/g,"<span class='IIIclassIII$1' onclick='_mc(this)' onmouseover='_mr(this);' onmouseout='_mt(this);'>$1X</span>"));
});

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<div id="parent"> Some text
<div>Child1</div>
<div>Child2</div>
and some other text
<div>Child3</div>
<div>Child4</div>
and here we are again
</div>

这是它的 Jsfiddle工作原理

小开

2019年版本-简短

document.querySelector('#your-div-id').childNodes[0].nodeValue = 'new text';

解释

document.querySelector('#your-div-id')用于选择父元素(要更改的文本的元素)

.childNodes[0]选择文本节点

.nodeValue = 'new text'将文本节点值设置为“ new text”

这个答案可能是受到迪安 · 马丁评论的启发。不能肯定，因为我已经使用这个解决方案多年了。只是觉得我应该把这个概率贴在这里，因为有些人更关心它，而不是这是最好的解决方案。

小开

选择父 div，我们可以使用 firstChild.textContent

let myDiv = document.getElementById("parentDiv");
myDiv.firstChild.textContent = "** New Text **"

小开

这里有一个递归的方法:

function changeInnerText(elm,text,newText) {
if (elm == null) {
return;
}
changeInnerTextHelper(elm.firstChild, text, newText);
}
function changeInnerTextHelper(elm, text, newText) {
if (elm == null) {
return;
}
if (elm.nodeType == 3 && elm.data == text) {
elm.data = newText;
return;
}
changeInnerTextHelper(elm.firstChild, text, newText);
changeInnerTextHelper(elm.nextSibling, text, newText);
}