html - JavaScript only targets first element on page

Question

I have the following script which I am trying to target any link with a class of .button to add a <span> tag around the text element. For example:

<a class="button" href="#">Read More</a>

Becomes

<a class="button" href="#"><span>Read More</span></a>

My script:

// insert span into anchor
"use strict";

var anchor = document.querySelector(".button");
var html = anchor.innerHTML;

anchor.innerHTML = "<span>" + html + "</span>";

This works, but only on the first instance of the page?

Answer 1

You should loop through all the elements using the ALL selector querySelectorAll() like :

var anchors = document.querySelectorAll(".button");

for( var i=0;i<anchors.length;i++){
     anchors[i].innerHTML = "<span>" + anchors[i].innerHTML + "</span>";
}

var anchors = document.querySelectorAll(".button");

for (var i = 0; i < anchors.length; i++) {
  anchors[i].innerHTML = "<span>" + anchors[i].innerHTML + "</span>";
}

console.log(document.body.innerHTML);

<button class='button'>Read More</button>
<br>
<button class='button'>Read More</button>
<br>
<button class='button'>Read More</button>