Question

我正在尝试改变WooCommerce的布局，但由于我无法实现这一点，我决定通过使用Javascript创建div并将其附加到现有div来将其更改为我的愿望。我确实有一些行通过某个类的每个div，但只有当我让他们改变innerHTML时才有效。但是当我使用appendChild时，它只会附加到最后一个div。任何人都知道它可能是什么？这是我使用的代码。 “product-type-simple”这个类是已经存在的div。

var product_item_wrapper = document.createElement("div");
  product_item_wrapper.style.width = "100px";
  product_item_wrapper.style.height = "100px";
  product_item_wrapper.style.background = "red";
  product_item_wrapper.style.color = "white";
  product_item_wrapper.innerHTML = "Hello";
  product_item_wrapper.className = "product";

var divjes = document.getElementsByClassName("product-type-simple");
  for(var i = 0; i < divjes.length; i++){
    divjes[i].appendChild(product_item_wrapper);
}

Answer 1

您正在创建一个元素。然后将它作为多个元素的子项追加。每次执行此操作时，都会将其从之前的位置移除，并将其放在新元素中。

如果你想要多个元素，那么你需要创建多个元素。

移动代码的前7行，使其在内部循环。

Answer 2

一个元素只能附加到一个div。考虑创建一个返回要追加的新元素的函数：

function createWrapper()
{
    var product_item_wrapper = document.createElement("div");
    product_item_wrapper.style.width = "100px";
    product_item_wrapper.style.height = "100px";
    product_item_wrapper.style.background = "red";
    product_item_wrapper.style.color = "white";
    product_item_wrapper.innerHTML = "Hello";
    product_item_wrapper.className = "product";
    return product_item_wrapper;
}

var divjes = {};
divjes = document.getElementsByClassName("product-type-simple");
for (var i = 0; i < divjes.length; i++)
{
    divjes[i].appendChild(createWrapper());
}

附加到具有相同类的所有div

2 个答案: