Add link text to span class name-CodePudding

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>

CodePudding user response：

The below code will work -

var links = document.getElementsByTagName("a");
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="#">London</a>
<a href="#">Berlin</a>