Style all Elements of a div created via .createElement('div')

user_17164067 0
Viewed 108

So I'm creating multiple new child divs inside another parent div with this code:

var parentDiv = document.querySelector('.parent-div')
const newDiv = document.createElement('div');
parentDiv.appendChild(newDiv);

So now I want to add an onlick event for every div I created, that resets the color for every other div inside the parent div, so that no multiple child divs are selected, and then set the color only for the clicked div to another color!

Any ideas?

createelement css html javascript
5 Answers

var parentDiv = document.querySelector('.parent-div');
for (let i = 0; i < 10; ++i) {
  const newDiv = document.createElement('div');
  newDiv.className = "my-class";
  newDiv.innerText = `Foo${i}`;
  parentDiv.appendChild(newDiv);
}
parentDiv.onclick = (event) => {
  document.querySelectorAll('.my-class').forEach((el) => {
    el.className = "my-class";
  });
  event.target.className += " active";
}
.my-class {
  color: red;
}

.active {
  color: blue;
}
<div class="parent-div"></div>

user_11487700 
        let parentDiv = document.querySelector('.parent-div');
        for (let x = 0; x < 10; x++) {

         let newDiv = document.createElement('div');
       newDiv.classList.add('see')

        parentDiv.appendChild(newDiv);
      }


      parentDiv.addEventListener('click', (e) => {
       if (e.target.tagName === 'DIV') {
         e.target.style.backgroundColor = 'red';
       }
     })
user_115829650

Just to suggest a more robust and flexible way:

// Utility functions
const EL = (sel, EL) => (EL||document).querySelector(sel);
const ELS = (sel, EL) => (EL||document).querySelectorAll(sel);
const ELNew = (tag, prop) => Object.assign(document.createElement(tag), prop);

// Now...

// Get element (Use an ID, not a class)
const EL_parent = EL('#parent');

// Function to toggle "is-active" class
const toggleActive = (EL_target, EL_parent) => {
  const EL_active = EL(".is-active", EL_parent);
  if (EL_active) EL_active.classList.remove("is-active");
  EL_target.classList.add("is-active");
};

// Function to create new child elements
const newChild = (content) => ELNew("div", {
  className: "child",
  innerHTML: content,
  onclick() {
    toggleActive(this, EL_parent);
  }  
});

// Create a couple of elements....
EL_parent.append(
  newChild("1 Lorem"),
  newChild("2 Ipsum"),
  newChild("3 Dolor"),
);
.is-active {
  background: gold;
}
<div id="parent"></div>

So just a better way, and to avoid sloppy code like className = or Event.target without the use of .closest(), as shown in the other answers.

user_3839040

I'm not sure if this is how you would want to do it for many reasons, but it might be beneficial for you to change the HTML value of the parent div. For example,

var parentDiv = document.querySelector('.parent-div')
parentDiv.innerHTML = parentDiv.innerHTML + "<div class='{class name}'></div>";
user_87295380

The approach proposed here is aware of which div was clicked the last time, changes its style accordingly and creates the onclick when the item is created.

var parentDiv = document.querySelector('.parent-div');
let lastDiv = undefined;
for (let i = 0; i < 10; i++) {
    let newDiv = document.createElement('div');
    newDiv.style.width = "100px";
    newDiv.style.height = "100px";
    newDiv.style.backgroundColor = "black";
    newDiv.style.border = "1px solid white";
    newDiv.onclick = function() {
        if (lastDiv) lastDiv.style.backgroundColor = "black";
        newDiv.style.backgroundColor = "green";
        lastDiv = newDiv;
    };
    parentDiv.appendChild(newDiv);
}
<div class="parent-div"></div>

user_4365600
Related