我有以下结构:
<li>
<a><i>...</i>Some Text Here!</a>
<input>
<a></a>
</li>
我只想更改元素Some Text Here!
下的字符串li
,而不影响(删除或更改)其他任何内容,即其所有子节点。
显然,textContent
如果设置,则删除所有后代元素。其他类似的方法似乎做同样的事情。我已经搜索了一段时间,但似乎无法解决这个问题。
如果有帮助,我可以将类或id设置为您在结构中看到的任何元素。
答案 0 :(得分:1)
假设您已在变量<a>
中添加了anchor
标记:
anchor.lastChild.textContent = 'My text';
请看下面的示例:
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;
答案 1 :(得分:1)
使用涵盖文本节点和元素的Element.childNodes
并替换他们的textContent
:
document.getElementsByTagName('a')[0].childNodes[1].textContent='Something else';
这显然取决于有多少标签,它们之间是否有空格,要替换的文本等等。
演示:
document.getElementsByTagName('p')[0].childNodes[1].textContent = ' Something else.';
&#13;
<p><i>I’m an element.</i> Some Text Here!</p>
&#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';
}