javascript - 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: ' ?';
}

question from:https://stackoverflow.com/questions/65650337/add-an-attribute-to-a-tag-using-js

Answer 1

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?