'Add link text to span class name

I have a list of links. And I want that link texts inserts as span span data-hover names. Please tell me how can i do this. Thanks!

What i have:

<a href="#">Paris</a>
<a href="#">London</a>
<a href="#">Berlin</a>

What i want:

<a href="#"><span data-hover="Paris">Paris</span></a>
<a href="#"><span data-hover="London">London</span></a>
<a href="#"><span data-hover="Berlin">Berlin</span></a>
htmljquery


Solution 1:[1]

The below code will work -

var links = document.querySelectorAll('a.className');
for (i = 0; i < links.length; i++) {
  links[i].innerHTML = '<span data-hover="' + links[i].innerHTML + '">' + links[i].innerHTML + '</span>'
}
<a href="#">Paris</a>
<a href="#" class="className">London</a>
<a href="#">Berlin</a>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions