JavaScript 仅针对页面上的第一个元素

Question

我有以下脚本，我试图将任何链接定位为 .button 类添加 <span>在文本元素周围标记。例如:

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

成为

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

我的脚本:

// insert span into anchor
"use strict";

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

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

这有效，但仅适用于页面的第一个实例？

Answer 1

您应该使用 ALL 选择器遍历所有元素 querySelectorAll() 喜欢:

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>