I'm trying to change the lay-out for WooCommerce, but since I can't get that working I decided to change it to my wishes by using Javascript to create a div and append it to the existing div. I do have some lines that go through every div with a certain class, but that only works when I let them change the innerHTML. But when I use appendChild, it only appends to the last div. Anyone have an idea what could be it? This is the code I use. The class "product-type-simple" is the div that already exists.
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);
}
You are creating one element. Then you append it as a child of multiple elements. Each time you do, you remove it from where it was before and place it in the new element.
If you want multiple elements, then you need to create multiple elements.
Move the first 7 lines of your code so they are inside the loop.
One element can only be appended to a single div. Consider making a function which returns a new element to be appended:
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());
}
Related
I'm trying to put a content div into each parent div, but this way it puts all the content divs to the first parent div, not each parent div. I've tried to do it in 2 for loops, tried forEach, but just can't figure it out.
for (let i = 0; i < 5; i++) {
const parent = document.createElement("div");
parent.classList.add("parent");
parent.setAttribute("id","parent");
document.getElementById("container").appendChild(parent);
const content = document.createElement("div");
content.classList.add("content");
document.getElementById("parnet").appendChild(content);
}
Ty for your answer
You're using id's to select your parents with. But you can't have multiple elements with the same id value. getElementById will also look for the first occurence of the id, so you will always get the first parent element.
Besides that, you already have a reference to the parent in your parent variable. No need to look it up again, just use the reference you already have.
const container = document.getElementById("container");
for (let i = 0; i < 5; i++) {
const content = document.createElement("div");
content.classList.add("content");
const parent = document.createElement("div");
parent.classList.add("parent");
parent.append(content);
container.append(parent);
}
This is an interesting question I saw on the net but didn't know the answer:
The following code is intended to add five identical boxes containing links to the document, but it doesn’t work properly. Why not?
// Copies the contents of one box into another
function copyContents(from, to){
for( var i=0; i<=from.childNodes.length-1; i++){
to.appendChild(from.childNodes[i]); // <---- Error on this line.
}
}
//create a box to copy:
var referenceBox = document.createElement('div');
var link = document.createElement('a');
link.href = 'http://www.example.com/';
link.textContent = 'A link';
referenceBox.appendChild(link);
//Add box copies to the document
for(var i=0; i<5; i++){
var newBox = document.createElement('div');
copyContents(referenceBox, newBox);
document.body.appendChild(newBox);
}
Options:
to.appendChild() expects HTML, but from.childNodes[i] is a node object, so all the boxes will contain the texts[Object Node].
document.createElement() reuses existing elements with the same tag, so only one box is added to the document.
The same link element can’t have multiple parents,so only one box ends up with a link in it.
A link’s href has to be set using setAttribute(); setting the property link.href won’t do anything,so none of the links in the boxes will point anywhere.
I guess the answer is 3, but not sure and don't know why?
Any explanation? Tnx
link: to the question
You should only iterate from i = 0 to childNodes.length - 1 in copyContent. Also, you should clone DOM nodes if you want to append them to multiple locations in your document (= 3rd option):
// Copies the contents of one box into another:
function copyContents(from, to) {
for (var i = 0; i < from.childNodes.length; i++) { // <-- change <= to <
to.appendChild(from.childNodes[i].cloneNode(true)); // <-- add cloneNode(true); to clone node and all its children
}
}
// Create a box to copy:
var referenceBox = document.createElement('div');
var link = document.createElement('a');
link.href = 'http://www.example.com/';
link.textContent = 'A link';
referenceBox.appendChild(link);
// Add box copies to the document:
for (var i = 0; i < 5; i++) {
var newBox = document.createElement('div');
copyContents(referenceBox, newBox);
document.body.appendChild(newBox);
}
See also appendChild only works first time
I am trying to get my game2 element to have two child divs containing the contents of the gameTwo array, but what is happening in this script is that the first time it iterates through the loop, it creates the child div I want, but the second time it creates a child of the child. Can someone advise on how I can edit this so that the divs are both siblings of each other?
var gameTwo = ['Kansas', 'Villanova']
var gameTwoText = '';
for (i = 0; i < gameTwo.length; i++) {
gameTwoText += "<div>" + gameTwo[i];
}
var secondGame = document.getElementById('game2').innerHTML = gameTwoText;
You need a closing tag on each div - try:
gameTwoText += "<div>" + gameTwo[i] + "</div>";
Without the </div>, you never close the first div so each subsequent one is created as a child of the last.
As others have said, make sure you close your DIV tag in the loop, however you can always do this the old fashion way which will build the elements via the DOM:
var secondGame = document.getElementById('game2');
var gameTwo = ['Kansas', 'Villanova'];
var div = null;
for (var i = 0, len = gameTwo.length; i < len; i++) {
div = document.createElement('div');
div.appendChild(document.createTextNode(gameTwo[i]));
secondGame.appendChild(div);
}
I want to set the width of my object to 80%. The parent div width is 100%
whats wrong?
var howManyDivsIHave = document.querySelectorAll('#section div.divs').length;
if(howManyDivsIHave == "1"){
var divs = document.getElementById("section").getElementsByClassName("divs");
divs.style.width = "80%";
divs.style.height = "80%";
divs.style.margin = "10%";
}
else if (howManyDivsIHave == "2"){
divs.style.width = "40%";
divs.style.height = "40%";
divs.style.margin-top = "30%";
divs.style.margin-bottom = "30%";
divs.style.margin-left = "5%";
divs.style.margin-right = "5%";
}
else if (howManyDivsIHave == "3"){
divs.style.width = "40%";
divs.style.height = "40%";
divs.style.margin = "5%";
}
}
UPDATE: You're still not accessing the individual members of the result set. You need to iterate through the results of getElementsByClassName as you're still trying to set style properties on the collection of results instead of the individual results. You also need to call getElementsByClassName just after your call to querySelectorAll or your divs var is going to fall out of scope when you get to the else if blocks. You should be able to figure out how to structure your loops from the original answer, so I'll leave it unedited:
childNodes is an Array. You need to iterate through the array and set your styles on each individual element. In the code you posted you're setting the styles on the array, not the individual DOM elements. Try something like
var divs = document.getElementById("section").childNodes;
for (var i = 0; i < divs.length; i++)
{
divs[i].style.width = "80%";
divs[i].style.height = "80%";
divs[i].style.margin = "10%";
}
Note that childNodes will contain all the children of your DOM element with an id of "section", so if there are other children that aren't divs under the "section" DOM element that you don't want to apply this styling to, you're going to need to do further filtering.
childNodes is a NodeList or array. You need to iterate through and add that style to the individual items:
for(i=0;i<divs.length;i++){
divs[i].style.width = "80%";
divs[i].style.height = "80%";
divs[i].style.margin = "10%";
}
I want to load an iframe using just javascript, so far I've been using this:
$(".punctis-social-box").html("<iframe></iframe>");
But since it is the only instruction I have that uses jQuery, I'll like not to depend any more on jQuery.
Maybe not the best way to start:
var elements = document.getElementsByClassName("punctis-social-box");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "<iframe></iframe>";
}
Or using querySelectorAll:
var elements = document.querySelectorAll(".punctis-social-box");
for (var i = 0; i < elements.length; i++) {
elements[i].innerHTML = "<iframe></iframe>";
}
In order to avoid all bad practicesTM you may use document.createElement instead of explicit change of inner HTML:
var element = document.querySelector(".punctis-social-box"),
iframe = document.createElement("iframe");
while (element.firstChild) { // the fastest way
element.removeChild(element.firstChild); // to clear the contents
}
element.appendChild(iframe); // adding new <iframe>
Method 1:
var social_boxes = document.getElementsByClassName('punctis-social-box');
social_boxes[0].innerHTML += '<iframe></iframe>'; // add to first element, loop thru "social_boxes" if you want to add iframe to all elements
Method 2 (better):
var social_boxes = document.getElementsByClassName('punctis-social-box');
var iframe = document.createElement('iframe');
social_boxes[0].appendChild(iframe); // add to first element, loop thru "social_boxes" if you want to add iframe to all elements