我如何在textContent的内部添加CSS类？

Question

你好，我试图对下面的HTML代码textContent进行更改，但是其中包含一个标签，因此如何更改textContent？如何在脚本中编辑HTML标记以保留标记类，但仅更改其中的文本？

这是默认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"

或

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

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

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

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

Answer 2

如果要更改标签内的html，请使用此：

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

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

Answer 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"