Question

我有以下结构：

<li>
    <a><i>...</i>Some Text Here!</a>
    <input>
    <a></a>
</li>

我只想更改元素Some Text Here!下的字符串li，而不影响（删除或更改）其他任何内容，即其所有子节点。

显然，textContent如果设置，则删除所有后代元素。其他类似的方法似乎做同样的事情。我已经搜索了一段时间，但似乎无法解决这个问题。

如果有帮助，我可以将类或id设置为您在结构中看到的任何元素。

Answer 1

假设您已在变量<a>中添加了anchor标记：

anchor.lastChild.textContent = 'My text';

请看下面的示例：

＆＃13;

var anchor = document.querySelector('a');
anchor.lastChild.textContent = 'Other text';

＆＃13;

<li>
    <a><i>Lalala...</i>Some Text Here!</a>
    <input>
    <a></a>
</li>

＆＃13;

Answer 2

使用涵盖文本节点和元素的Element.childNodes并替换他们的textContent：

document.getElementsByTagName('a')[0].childNodes[1].textContent='Something else';

这显然取决于有多少标签，它们之间是否有空格，要替换的文本等等。

演示：

＆＃13;

document.getElementsByTagName('p')[0].childNodes[1].textContent = ' Something else.';

＆＃13;

<p><i>I’m an element.</i> Some Text Here!</p>

＆＃13;

Answer 3

~~你不能。~~更正。

但是，为了清洁起见，您应该将文本包装在一个范围内，然后替换范围的内容。它更容易阅读，如下：

<强> HTML

<li>
  <a><i>...</i><span class="replace-me">Some text here!</span></a>
</li>

<强>的jQuery

$('.replace-me').text('Some new text here now!');

Answer 4

您还可以获取元素内容并将每个nodeType检查为TEXT_NODE

Jquery版本：

$('a').contents().filter(function () { 
    return this.nodeType === Node.TEXT_NODE; 
})
.each(function () { 
    this.nodeValue = 'Something else'; 
});

Javascript版本：

var nodes = document.getElementsByTagName('a')[0].childNodes;
for (var i in nodes){
    if (nodes[i].nodeType === Node.TEXT_NODE)
        nodes[i].nodeValue = 'Something else';
}

如何只替换元素上的文本内容？

4 个答案: