Highlight a section of the innerHTML code

Question

Highlight a section of the innerHTML code

Currently, I am working on creating a table that will showcase the dates of the upcoming 10 days. In order to populate the table with the day, date, month, and year, I have implemented the following JavaScript code:

document.getElementById(i).innerHTML = weekday + " " + date + " " + month + " " + year;

The Challenge at Hand:

I am facing an issue where I aim to underline only the month in the displayed information, without affecting the other values. Despite my attempts to assign a CSS class along with the variable for this purpose, I have encountered consistent failures.

If further elucidation or snippets of code are required for clarification, feel free to seek additional details. As a novice poster on this platform, my venture into JavaScript spans merely a month or so. Your guidance would be immensely appreciated.

javascript css innerhtml

Answer 1

Answer №1

To add meaning and style to a specific element, it's recommended to use a CSS class. You can enclose the element in a  with the appropriate class and then apply the necessary styles through your stylesheet.

document.getElementById(i).innerHTML = weekday + " " 
                                       + date
                                       + " <span class='month'>" + month + "</span> "
                                       + year;

Custom Style:

.month { text-decoration: underline; }

By using a semantic class instead of inline styles, you have the flexibility to easily update the styling globally without having to make changes in multiple locations where the style is applied.

EDIT: It's important to consider user experience when choosing to underline text. In most web browsers, underlined text typically signifies a clickable link. Make sure that the use of underlining aligns with the intended functionality of the element.

Answer 2

To add meaning and style to a specific element, it's recommended to use a CSS class. You can enclose the element in a  with the appropriate class and then apply the necessary styles through your stylesheet.

document.getElementById(i).innerHTML = weekday + " " 
                                       + date
                                       + " <span class='month'>" + month + "</span> "
                                       + year;

Custom Style:

.month { text-decoration: underline; }

By using a semantic class instead of inline styles, you have the flexibility to easily update the styling globally without having to make changes in multiple locations where the style is applied.

EDIT: It's important to consider user experience when choosing to underline text. In most web browsers, underlined text typically signifies a clickable link. Make sure that the use of underlining aligns with the intended functionality of the element.

Answer 3

Answer №2

While not the most sophisticated approach, this solution gets the job done:

Utilizing the document.getElementById(i) method to populate the innerHTML with a combination of weekday, date, <span style='text-decoration: underline;'>month</span>, and year.

Answer 4

While not the most sophisticated approach, this solution gets the job done:

Utilizing the document.getElementById(i) method to populate the innerHTML with a combination of weekday, date, <span style='text-decoration: underline;'>month</span>, and year.

Answer 5

Answer №3

Instead of relying on innerHTML to handle HTML content, why not use markup directly for better control and understanding.

document.getElementById(i).innerHTML = weekday + " " + date + " <u>" + month + "</u>" + year;

A simple solution was implemented by using the underline tag in this case :)

Answer 6

Instead of relying on innerHTML to handle HTML content, why not use markup directly for better control and understanding.

document.getElementById(i).innerHTML = weekday + " " + date + " <u>" + month + "</u>" + year;

A simple solution was implemented by using the underline tag in this case :)

Answer 7

Answer №4

To add an underline to specific text in HTML, you can utilize the  tag. An example of how to implement this is shown below:

document.getElementById(i).innerHTML = weekday + " " + date + " <u>" + month + "</u> " + year;

Here's a demonstration using the mentioned approach > http://jsfiddle.net/vuS4B/

Alternatively, you could apply the underline effect using a  element and assign a CSS class to it. See the code snippet below:

document.getElementById(i).innerHTML = weekday + " " + date + " <span class='underline'>" + month + "</span> " + year;

Below is the CSS style for the span with underline:

span.underline { text-decoration: underline; }

View the updated jsFiddle demo here > http://jsfiddle.net/vuS4B/1/

Answer 8

To add an underline to specific text in HTML, you can utilize the  tag. An example of how to implement this is shown below:

document.getElementById(i).innerHTML = weekday + " " + date + " <u>" + month + "</u> " + year;

Here's a demonstration using the mentioned approach > http://jsfiddle.net/vuS4B/

Alternatively, you could apply the underline effect using a  element and assign a CSS class to it. See the code snippet below:

document.getElementById(i).innerHTML = weekday + " " + date + " <span class='underline'>" + month + "</span> " + year;

Below is the CSS style for the span with underline:

span.underline { text-decoration: underline; }

View the updated jsFiddle demo here > http://jsfiddle.net/vuS4B/1/

Highlight a section of the innerHTML code

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Filtering out specific properties from an element within a JavaScript forEach loop

Having trouble getting the material-ui datepicker to function properly

JavaScript pause until the DOM has been modified

Loading Webfonts Asynchronously in NextJS Using Webfontloader

Splitting Code in React Components using Webpack within a Ruby on Rails Application

Use jQuery eq() to populate a group of text fields with data stored in localStorage

Is there a way to delete values from a JavaScript object and include an index column?

What is the best way to insert a Button within a Tab while ensuring that the indicator remains in the appropriate tab?

Tips on utilizing JavaScript to retrieve all HTML elements that have text within them, then eliminating the designated element and its descendants

Error: The property 'updateOne' cannot be read because it is undefined

Tips for properly formatting objects in a JSON file with commas using nodejs

Creating a Multi-Step Form and Transmitting Data to Various Endpoints using Vanilla JavaScript

When the LI element is clicked, it triggers the display of another LI element without affecting the rest of the

Is there a way to eliminate these HTML tags from my React application?

Can you explain the distinctions between flexbox and grid systems?

TinyMCE: Tips for adding and highlighting text in your content!

Creating a donut chart sparkline in React using Highcharts - a step-by-step guide

Incorporate a distinct identifier for every menu item within the Material UI TablePagination

Ways to ensure that floating blocks remain in the same row using CSS

Page width incorrectly set leading to unnecessary scrolling