What is the method for adding a CSS class to the textContent in a HTML element?

Question

What is the method for adding a CSS class to the textContent in a HTML element?

Hi there, I'm currently trying to make some changes to the textContent of the HTML code below. However, it contains an  tag, so I'm wondering how I can change the textContent without affecting the  tag itself. Is there a way to edit the HTML tag in the script while preserving the  tag's class but only modifying the text within it?

This is what the original HTML looks like:

https://i.sstatic.net/J69Ti.png

And here is what it looks like after my edits:

https://i.sstatic.net/c8SoZ.png

HTML Code

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

Script

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

javascript html css ajax dom

Answer 1

Answer №1

To target the final text node, utilize lastChild or childNodes[lastIndex] and modify its content with node.nodeValue="Something"

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

or

 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

To target the final text node, utilize lastChild or childNodes[lastIndex] and modify its content with node.nodeValue="Something"

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

or

 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 3

Answer №2

In order to modify the content within your anchor tag in HTML, simply follow this method:

var notificationUnread = document.getElementById('notificationUnread').innerHTML = "Insert your customized HTML here";

Alternatively, if you wish to only change the text without altering the HTML structure, replace innerHTML with innerText.

Answer 4

In order to modify the content within your anchor tag in HTML, simply follow this method:

var notificationUnread = document.getElementById('notificationUnread').innerHTML = "Insert your customized HTML here";

Alternatively, if you wish to only change the text without altering the HTML structure, replace innerHTML with innerText.

Answer 5

Answer №3

One way to update specific text is by enclosing it in a 

<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 6

One way to update specific text is by enclosing it in a 

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

What is the method for adding a CSS class to the textContent in a HTML element?

Answer №1

Answer №2

Answer №3

Similar questions

Tips for rendering XML tags in a web browser without relying on the <xmp> or <pre> elements

AngularFire: Retrieve the $value

Leveraging the outcome of a for loop in order to set a condition within an else if statement

Discovering the initial element with a data attribute above zero using JQuery

Custom Typescript type that runs concurrently with the base type is disregarded

What's the best way to showcase data in a column dynamically depending on its specific columns?

Loop through each HTML element and store it in a JavaScript array

The variable ReactFauxDOM has not been declared

Is it possible to nest ng-repeat and access $first and $last properties simultaneously

Transferring user input from UI Dialog using AJAX requests

A duo of adjacent buttons styled with HTML, CSS, and Bootstrap

How do I navigate back to show the initial parent component instead of the nested child component in ReactJS?

Can you guide me on how to establish a cookie within a selenium webdriver javascript script?

How to nullify the valueChanges pipe in Angular RxJS until the observable is resolved

Getting started with TypeScript in combination with Node.js, Express, and MongoDB

Tips for setting up Reaction Roles in discord.js?

When using the `Document.write()` method, an error is returned stating, "Uncaught TypeError: Cannot read property 'document' of null"

Problem with automatic saving of workspaces in DBeaver

Troubleshooting a Basic jQuery Validation Problem

How come I'm unable to send the HTTP request contents as a response using express.js?