如何使用嵌套类更改 web 元素列表中每个项目的 innerHTML答案

【问题标题】：How to change innerHTML of each item in a list of webelements with nested classes如何使用嵌套类更改 web 元素列表中每个项目的 innerHTML
【发布时间】：2018-09-06 08:37:48
【问题描述】：

我正在尝试制作一个添加几个数字的 javascript webextension，例如。 “123”到购物网站上每个产品的超链接文本的内部文本末尾，http://www.tomleemusic.ca

例如，如果我转到此链接，http://tomleemusic.ca/catalogsearch/result/?cat=0&q=piano

我想在每个产品名称的末尾添加一些数字。 name of product and its nested hyperlink

到目前为止，我已经尝试了以下代码，但没有产生任何结果。感谢您的帮助:)

var products= document.querySelector(".category-products, .products- 
grid category-products-grid itemgrid itemgrid-adaptive itemgrid-3col 
centered hover-effect equal-height");
var productslist = products.getElementsByClassName("item");
for (var i = 0; i < productslist.length; i++) {
    productslist[i].getElementsByClassName("product-name").innerHTML = 
productslist[i].getElementsByClassName("product-name").innerHTML + 
"1234";
}

【问题讨论】：

抱歉代码缩进很奇怪，本站新来的

标签： javascript html google-chrome innerhtml

【解决方案1】：

您的查询错误，您应该使用 querySelectorAll 而不是 querySelector 来获取与查询匹配的所有元素。

以下是给定站点所需的代码：

var productsListLink = document.querySelectorAll(".products-grid .item .product-name a:not(.product-image)");
for (var i = 0; i < productsListLink.length; i++) {
    var a = productsListLink[i];
    var name = a.innerHTML || "";
    name += "1234";
    a.innerHTML = name;
    a.setAttribute('title', name);
}

【讨论】：

谢谢！我是 javascript 和一般编码的新手，所以这是一个巨大的帮助。谢谢！！

【解决方案2】：

我想我找到了你需要的东西。

var products = document.querySelector(".category-products .products-grid.category-products-grid.itemgrid.itemgrid-adaptive.itemgrid-3col.centered.hover-effect.equal-height");
var productslist = products.getElementsByClassName("item");

for (var i = 0; i < productslist.length; i++) {
var productName = productslist[i].getElementsByClassName("product-name")[0].firstChild;
productName.innerHTML = productName.innerHTML + "1234";
}

【讨论】：