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

时间:2015-10-07 23:55:03

标签: javascript text nodes

我有以下结构:

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

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

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

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

4 个答案:

答案 0 :(得分:1)

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

anchor.lastChild.textContent = 'My text';

请看下面的示例:

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:1)

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

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

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

演示:

&#13;
&#13;
document.getElementsByTagName('p')[0].childNodes[1].textContent = ' Something else.';
&#13;
<p><i>I’m an element.</i> Some Text Here!</p>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

你不能。更正。

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

<强> HTML

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

<强>的jQuery

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

答案 3 :(得分:0)

您还可以获取元素内容并将每个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';
}