用 JavaScript 按类替换内容答案

【问题标题】：Replace content by class with JavaScript用 JavaScript 按类替换内容
【发布时间】：2016-05-10 11:44:06
【问题描述】：

如何使用 Javascript 按类选择元素来修改内容？

其实我试过用这个：

document.getElementsByClassName("myClass").innerHTML = "new content"

但什么也没做。如果我按 ID 选择元素，它就可以工作

document.getElementById("myID").innerHTML = "new content"

但我需要可以按班级选择。

我只需要更改标签内的内容。将文本替换为 woocommerce 按钮的 img 元素。

谢谢！

【问题讨论】：

标签： javascript html wordpress woocommerce

【解决方案1】：

getElementsByClassName 将返回数组。因此，循环该数组并执行您的逻辑：

var myClasses = document.getElementsByClassName("myClass");

for (var i = 0; i < myClasses.length; i++) {
  myClasses[i].innerHTML = "new content";
  }

<div class="myClass">old content</div>
<div class="myClass">old content</div>

【讨论】：

【解决方案2】：

正如其他人指出的那样，getElementsByClass 返回一个数组。如果你愿意使用 jquery，它可以简化为

$(".myClass").html("new content")

【讨论】：

【解决方案3】：

getElementsByClassName 返回一个数组，因此您必须循环该数组以更改具有给定类的内容。您可以尝试以下代码。希望对你有帮助。

var arr = document.getElementsByClassName("myClass");
for (var i = 0; i < arr.length; i++) {
   arr[i].innerHTML = "new content";
}

【讨论】：

是的，这是一个巧合，而我正在回答 justinas 已经回答了。唯一的区别是变量名。

【解决方案4】：

document.getElementsByClassName 返回一个数组，因为类不是唯一的，而document.getElementById 只返回一个对象（它应该是唯一的）。

长话短说，试试document.getElementsByClassName("myClass")[i].innerHTML = "new content"，我可以取从0到n-1的值，其中n是.myclass类的元素数。

【讨论】：

【解决方案5】：

您的班级名称不是唯一的。即许多其他元素使用相同的类名。所以document.getElementsByClassName("myClass") 这将重新运行一个包含所有类的数组。因此，您要么需要通过document.getElementsByClassName("myClass")[0] 选择 porper 类，要么为该特定元素分配一些 id。

【讨论】：

【解决方案6】：

ECMAScript 2015 (ES6) 还提供了spread 运算符，可用于将getElementsBYClassName 返回的HTMLCollection 转换为常规数组，然后与forEach() 结合，以将所有数组元素更改为新的内容，与行：

[...document.getElementsByClassName('myClass')].forEach(element => {
    element.innerHTML = '<div>New Content</div>' }

【讨论】：

【解决方案7】：

类以数组的形式返回，因此需要迭代数组。

【讨论】：

【解决方案8】：

使用这样的东西：

var elems = document.getElementsByClassName('myClass'), i;
for (i in elems) {
    elems[i].innerHTML = "new content";
}

【讨论】：

为什么要循环所有元素而不是只取类名的元素？
尝试调整这个答案以使用getElementsByClassName。
丑陋的变量声明把 i 放在新的一行请。