如何在 textContent 中附加 CSS 类？

Question

您好，我正在尝试更改以下 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"

Answer 1

lastChild您可以使用或定位最后一个文本节点，childNodes[lastIndex] 并使用以下命令更改其值node.nodeValue="Something"document.getElementById("notificationUnread").lastChild.nodeValue="Test"或者&nbsp;let nodes=document.getElementById('notificationUnread').childNodes&nbsp;nodes[nodes.length-1].nodeValue= "TES"//let nodes=document.getElementById('notificationUnread').childNodes//nodes[nodes.length-1].nodeValue= "TES"//Without spandocument.getElementById("notificationUnread").lastChild.nodeValue="Test Without span"//With spandocument.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">&nbsp; <i class="fas fa-bell mr-2"></i> 0 unread notifications</a><br><!--with span --><a id="notificationUnread2" class="dropdown-item">&nbsp; <i class="fas fa-bell mr-2"></i>&nbsp; <span class="text-notification">0 unread notifications</span></a>

Answer 2

将要更改的文本包装在<span><a id="notificationUnread" class="dropdown-item">&nbsp; <i class="fas fa-envelope mr-2"></i> <span class="link-text">0 unread notifications<span></a>document.querySelector('#notificationUnread .link-text').innerText = "TEST"

Answer 3

如果您想更改 a 标记内的 html，请使用以下命令：var&nbsp;notificationUnread&nbsp;=&nbsp;document.getElementById('notificationUnread').innerHTML&nbsp;=&nbsp;"your&nbsp;html&nbsp;here";否则，您只能通过将innerHTML 替换为innerText 来更改文本