如何在不删除子级的情况下更改跨度文本？ [重复]

Question

此问题已经在这里有了答案：

How can I change an element's text without changing its child elements?（14个回答）

关闭2分钟前。

基本上我的span以下：

<span id="test">hello <span id="what">john</span>, How are you?</span>

我只想更改test跨度的文本而不删除其子级/ what跨度。

我尝试了jQuery text()函数，但这似乎删除了子级。

在此处查看演示：https://jsfiddle.net/rf9x7zq3/4/

Answer 1

为什么不将“ hello”放在其自身的范围内，而仅更改其内容？

HTML

<span id="test"><span id="greeting">hello </span><span id="what">john</span>, How are you?</span>

JS

$(document).ready(function(){
    $('#greeting').text('hi');
});

Answer 2

您可以这样做：

let test = document.getElementById("test");
for (let child of test.childNodes) {
  if (child.nodeType === 3) {
    child.textContent = " hi ";
  }
}

<span id="test">hello <span id="what">john</span>, How are you?</span>

基本上，您循环浏览跨度为文本child.nodeType === 3的子节点，然后可以更新其内容。在上面的代码段中，我只是将所有文本节点替换为“ hi”，而将内部范围ID保留为“ what”。您可以更改为任何希望这些子文本节点的文本。