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>

Answer 2

querySelector()仅返回第一个匹配的元素。要从页面中获取所有元素，您必须使用querySelectorAll()。然后遍历所有要更改的元素：

"use strict";

var anchor = document.querySelectorAll(".button");
anchor.forEach(function(a){
  a.innerHTML = "<span>" + a.textContent + "</span>";
});

span{
  color: green;
}

<a class="button" href="#">Home</a><br>
<a class="button" href="#">About Us</a><br>
<a class="button" href="#">Read More</a>

JavaScript仅定位页面上的第一个元素

2 个答案: