css 如何在循环中使用createElement?

z9ju0rcb  于 2022-12-15  发布在  其他
关注(0)|答案(1)|浏览(186)
const arrow = document.querySelector("#arrow");
const callAllPie = document.querySelector(".allPie");

eventList();
function eventList(e) {
  arrow.addEventListener("click", showSkills);
}

function showSkills() {
  const pie = document.createElement("div");
  pie.classList.add("pie1");

  callAllPie.appendChild(pie);

  const rightDiv = document.createElement("div");
  rightDiv.classList.add("slice-right1");

  const leftDiv = document.createElement("div");
  leftDiv.classList.add("slice-left1");

  const percentDiv = document.createElement("div");
  percentDiv.classList.add("percent1");

  const numberDiv = document.createElement("div");
  numberDiv.classList.add("number1");
  numberDiv.innerHTML = "%99";

  const nameDiv = document.createElement("div");
  nameDiv.classList.add("name1");
  nameDiv.innerHTML = "HTML";

  pie.appendChild(rightDiv);
  pie.appendChild(leftDiv);
  pie.appendChild(percentDiv);
  percentDiv.appendChild(numberDiv);
  percentDiv.appendChild(nameDiv);
  callAllPie.appendChild(pie);
}

我希望当我点击的时候有4个div出现,并且每个div的innertext是不同的,我该怎么做呢
我怎么做这个问题使用循环或任何其他方式

jgwigjjp

jgwigjjp1#

从你所说的,我理解你想通过CallAllPie的孩子循环,如果是这样的话,你可以看到这个问题来获得帮助:How do I loop through children objects in javascript?从技术上讲,元素不是数组,但是你可以使用Element.children得到它们的子元素,然后你可以在循环中使用它们的索引来访问它们。

let children = CallAllPie.children;
for(let i = 0; i < children; i++) {
let selectedChildren = CallAllPie[i]
}

或者你可以使用Array.from()函数将CallAllPie.children转换成一个数组,然后使用for...in。

let children = Array.from(callAllPie.children)
for(item in children) {
//...Do something
}

相关问题