我只想替换给定元素的文本,它应该是它自己的函数。
例如,像这样:
<div id="thisDivIsGettingTargeted">
<span>
Edit me!
<i class="fas fa-edit"></i>
</span>
</div>
应替换为:
<div id="thisDivIsGettingTargeted">
<span>
Oh yeah
<i class="fas fa-edit"></i>
</span>
</div>
它并不总是第一个 child ,所以我不能使用 firstChild
。
我真的不知道如何实现这一目标。我必须搜索最低元素并更改其文本,但在本例中,它总是找到 i
标记。
这就是我写的函数。
const get_object = element => {
if (!element.hasAttribute("data-liner-stop-search") && element.childElementCount === 1){
return get_object(element.firstElementChild)
}
return element
};
这是另一个例子:
<span class="text-one-liner">
<span class="name">
Username
<span data-tooltip="A tooltip">
<i class="fas fa-crown"></i>
</span>
</span>
</span>
.text-one-liner
已被定位,“用户名”应更改。
最佳答案
您可以通过过滤 nodeType 属性来完成此操作。请注意,用于格式化代码的空格也显示为子节点。您可能也想过滤这些内容,如下面的示例所示 (node.nodeValue.trim() !== ""
)。
document.querySelector('#thisDivIsGettingTargeted span').childNodes.forEach((node) => {
if(node.nodeType === Node.TEXT_NODE && node.nodeValue.trim() !== "") {
node.nodeValue = "new text";
}
});
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
<div id="thisDivIsGettingTargeted">
<span>
Edit me!
<i class="fas fa-edit"></i>
</span>
</div>
关于Javascript - 一般仅替换文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59553043/