如何在里面附加一个带有 CSS 类的 textContent？

Posted 2023-03-05

【中文标题】如何在里面附加一个带有 CSS 类的 textContent？

【英文标题】：How do I append a textContent with a CSS class inside?

【发布时间】：2020-07-31 20:26:20

【问题描述】：

您好，我正在尝试对以下 html 代码 textContent 进行更改，但是其中包含 <i> 标记，那么我该如何更改 textContent？如何编辑脚本中的 HTML 标记以保留 <i> 标记类但只更改其中的文本？

这是默认 HTML 的样子

这是我修改后的样子

HTML 代码

---

<a id="notificationUnread" class="dropdown-item">
  <i class="fas fa-envelope mr-2"></i> 0 unread notifications
</a>

脚本

---

var notificationUnread = document.getElementById('notificationUnread').textContent = "TEST"

【参考方案1】：

您可以使用lastChild 或childNodes[lastIndex] 定位最后一个文本节点，并使用node.nodeValue="Something" 更改其值

document.getElementById("notificationUnread").lastChild.nodeValue="Test"

或

 let nodes=document.getElementById('notificationUnread').childNodes
 nodes[nodes.length-1].nodeValue= "TES"

//let nodes=document.getElementById('notificationUnread').childNodes
//nodes[nodes.length-1].nodeValue= "TES"
//Without span
document.getElementById("notificationUnread").lastChild.nodeValue="Test Without span"
//With span
document.querySelector("#notificationUnread2 > .text-notification").innerText="Test with span"

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<!--without span -->
<a id="notificationUnread" class="dropdown-item">
  <i class="fas fa-bell mr-2"></i> 0 unread notifications
</a>

<br>
<!--with span -->
<a id="notificationUnread2" class="dropdown-item">
  <i class="fas fa-bell mr-2"></i>
  <span class="text-notification">0 unread notifications</span>
</a>

【讨论】：

您好，感谢您的帮助。但我想问一下，如果它既不是 .firstChild 也不是 .lastChild 我该如何纠正？

你应该用 span 环绕文本并给出 class 或 id 然后使用选择器来定位它并更改它。

例如 测试?

我已经更新了答案请用span和不span检查它

好的，非常感谢您的详细解释。我会看一下代码并尝试理解它。

【参考方案2】：

如果您想更改 a 标签内的 html，请使用：

var notificationUnread = document.getElementById('notificationUnread').innerHTML = "your html here";

否则，您只能通过将 innerHTML 替换为 innerText 来更改文本

【讨论】：

您好，我尝试过使用 .innerHTML，但这会删除 标签以及它，只留下“文本”。

然后使用innerText属性 --> var notificationUnread = document.getElementById('notificationUnread').innerText = "your Text here";

您好，我已经尝试过 .innerText 和 .innerHTML 但上述使用 .lastChild.nodeValue 的解决方案对我有用。感谢您的帮助，非常感谢您抽出宝贵时间提供帮助。

【参考方案3】：

如何将要更改的文本包装在 <span> 中

<a id="notificationUnread" class="dropdown-item">
  <i class="fas fa-envelope mr-2"></i> <span class="link-text">0 unread notifications<span>
</a>

document.querySelector('#notificationUnread .link-text').innerText = "TEST"