如何在 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"

或者

 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>

Answer 2

将要更改的文本包装在<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"

Answer 3

如果您想更改 a 标记内的 html，请使用以下命令：

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

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