如何更改元素的文本而不更改其子元素？

小编典典

如何更改元素的文本而不更改其子元素？

javascript

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

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

我是jQuery的新手，因此对我来说，这项任务似乎非常具有挑战性。有人可以指出我要使用的功能/选择器吗？

如果可能的话，我想在不为需要更改的文本添加新容器的情况下执行此操作。

阅读 505

2020-04-25

共1个答案

小编典典

在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);）。

2020-04-25