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

Question

我想动态更新元素的文本:

<div>
   **text to change**
   <someChild>
       text that should not change
   </someChild>
   <someChild>
       text that should not change
   </someChild>
</div>

我是jQuery的新手,所以这个任务对我来说似乎很有挑战性.有人可以指向我使用的功能/选择器吗？

如果可能的话,我想在不添加新容器的情况下执行此操作,以便我需要更改.

Answer 1

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

Answer 2

更新2018年

由于这是一个非常流行的答案,我决定通过将textnode选择器添加到jQuery作为插件来更新和美化它.

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

我添加了一个示例,如何替换第一个文本节点以及如何替换所有文本节点.

这种方法使得更容易阅读代码并更容易使用它多次和不同的目的.

将更新2017年(adrach)如果你喜欢的应该仍然正常工作.

jQuery.fn.textNodes = function() {
  return this.contents().filter(function() {
    return (this.nodeType === Node.TEXT_NODE && this.nodeValue.trim() !== "");
  });
}

$(document).ready(function(){
  $('#replaceAll').on('click', function() {
    $('#testSubject').textNodes().replaceWith('Replaced');
  });

  $('#replaceFirst').on('click', function() {
    $('#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>

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/

Answer 3

见实际操作

加价:

$(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" />

Answer 4

<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");
});

这仅更改第一个textnode

Answer 5

只需在要使用类选择的范围中包含要更改的文本.

不一定回答我所知道的问题,但是,可能是一个更好的编码实践.保持干净简洁

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

Answer 6

对于您提到的特定情况：

<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;
}