同じクラスのすべてのdivに追加する

Question

私はWooCommerceのレイアウトを変更しようとしていますが、その作業を行うことができないため、Javascriptを使用して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

1つの要素を作成しています。次に、それを複数の要素の子として追加します。あなたが行うたびに、それを元の場所から削除し、新しい要素に配置します。

複数の要素が必要な場合は、複数の要素を作成する必要があります。

のループのように、コードの最初の7行を移動します。

Answer 2

1つの要素は1つの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()); 
}