Как добавить 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

Если вы хотите изменить html внутри вашего тега, используйте это:

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

в противном случае вы можете изменить текст только с заменой inner HTML на innerText