Add an attribute to <a> tag using JS

Question

As depicted in the above image, I am trying to put a tick mark (✓) next to 'a set of particular' visited links (links inside li tags) in my webpage.

JS used in the HTML to insert a 'visited' attribute to <a> tags. I placed this code in the footer (after the links are displayed in the screen). This is not working though (I am not seeing the attribute created in the HTML).

localStorage.setItem('visited-'+window.location.pathname,true);
var links = document.querySelectorAll('#the-content > ul > li > a');
for (i=0;i<links.length;i++) {   
  var link = links[i];
  if (link.host == window.location.host && localStorage.getItem('visited-' + link.pathname + '/')) {
    link.dataset.visited=true;
  }
}

CSS Code
I can confirm that this code is working as if I manually create an attribute for the <a> tag, the styling is applied.

article .the-content a[data-visited] {
  border-bottom: 1px dashed orange;
}

article .the-content a[data-visited]:after {
  content: ' ✓';
}

rink.attendant.6 · Accepted Answer · 2021-01-10 05:28:15Z

2

Use setAttribute():

link.dataset.visited=true;
link.setAttribute('data-visited', 'true');

The dataset property only manipulates the JavaScript properties but does not impact HTML attributes. More information about the difference can be found in this question: What is the difference between properties and attributes in HTML?

answered Jan 10, 2021 at 5:28

rink.attendant.6

46.7k64 gold badges111 silver badges161 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

amitz27 Over a year ago

Thanks for the pointer. However, its not working for me yet. Is it something to do with my document selector code snippet?

rink.attendant.6 Over a year ago

@amitz27 Your CSS indicates that the-content is a class while your document selector in the JS indicates that the-content is an ID. Without seeing the HTML, we can't tell which is correct.

amitz27 Over a year ago

@rick.attendant.6 - HTML is here -> thomas9.com

rink.attendant.6 Over a year ago

@amitz27 You need to change #the-content to .the-content in your querySelectorAll

amitz27 Over a year ago

The + '/' in my code caused the issue. Thanks so much for your help!

Hemant · Accepted Answer · 2021-01-10 06:24:43Z

1

You can use createAttribute() for this

just replace

link.dataset.visited=true;

with

let attr = document.createAttribute("data-visited"); // Create a "data-visited" attribute
attr.value = true; // Set the value of the attribute
link.setAttributeNode(attr); // assign attribute node to element

to know more about createAttribute() check this

Update: your 'the-content' used in html is a class not an id Also replace

document.querySelectorAll("#the-content > ul > li > a");

with

document.querySelectorAll(".the-content > ul > li > a");

edited Jan 10, 2021 at 6:24

answered Jan 10, 2021 at 6:00

Hemant

1,1661 gold badge11 silver badges19 bronze badges

4 Comments

amitz27 Over a year ago

Thanks for the pointer. But not working for me yet.

amitz27 Over a year ago

Thanks @Hemant Malik - I assume your last line of code should be "link.setAttributeNode(attr);". I updated the querySelectorAll as mentioned and still no luck.

amitz27 Over a year ago

The + '/' in my code caused the issue. Thanks so much for your help!

Hemant Over a year ago

Great! thanks for pointing out that 'attr' issue in the code, i have fixed it now just in case someone copies it.

Collectives™ on Stack Overflow

Add an attribute to <a> tag using JS

2 Answers 2

5 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related