Question

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

其实我试过用这个：

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

但什么也没做。如果我按ID选择元素就可以了

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

但我需要可以按课程选择。

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

谢谢！

Answer 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>

Answer 2

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

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

Answer 3

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

Answer 4

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

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

Answer 5

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

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

Answer 6

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

Answer 7

使用类似的东西：

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

Answer 8

ECMAScript 2015（ES6）还提供了spread运算符，该运算符可用于将getElementsBYClassName返回的HTMLCollection转换为常规数组，然后将其与forEach（）结合使用，以使用新的内容，并带有以下一行：

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

使用JavaScript替换内容

8 个答案: