Как изменить innerHTML каждого элемента в списке веб-элементов с вложенными классами

Question

Я пытаюсь сделать расширение javascript, которое добавляет пару цифр, например.«123» в конце внутреннего текста гиперссылки на каждый товар на сайте покупок, например, http://www.tomleemusic.ca

, если я перехожу по этой ссылке, http://tomleemusic.ca/catalogsearch/result/?cat=0&q=piano

Я хочу добавить несколько цифр в конце названия каждого продукта. название продукта и его вложенная гиперссылка

До сих пор я пробовал следующий код, но он не дает никаких результатов.Спасибо за помощь :)

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";
}

Answer 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);
}

Answer 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";
}