时间戳

首页 > 解决方案 > JavaScript 只针对页面上的第一个元素

javascript - JavaScript 只针对页面上的第一个元素

问题描述

我有以下脚本，我试图将任何链接作为目标，.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>";

这有效，但仅在页面的第一个实例上？

标签： javascripthtml

解决方案

您应该使用 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>

推荐阅读