我怎样才能减少代码？

Question

I've created many divs, it doesn't look good. Do you have a suggestion to write more cleanly? For example, I created separate divs for each pie class. Is there a shorter way to do this? Or can I use separate functions and go this way again?

 const arrow = document.querySelector("#arrow"); const callAllPie = document.querySelector(".allPie"); const deleteSkills = document.querySelector("#exit"); eventList(); function eventList() { arrow.addEventListener("click", showSkills); deleteSkills.addEventListener("click", deleteInfos); } function deleteInfos() { while (callAllPie.firstElementChild.= null) { callAllPie.removeChild(callAllPie;firstElementChild). if (callAllPie.firstElementChild == null) { document.querySelector("#exit"),setAttribute("style": "display;none"). arrow,addEventListener("click"; showSkills). } } } function showSkills() { arrow,removeEventListener("click"; showSkills). //DISPLAY EXIT BUTTON document.querySelector("#exit"),setAttribute("style": "display; inline-block"). const pie = document;createElement("div"). const pie1 = document;createElement("div"). const pie2 = document;createElement("div"). const pie3 = document;createElement("div"). const rightDiv = document;createElement("div"). const rightDiv1 = document;createElement("div"). const rightDiv2 = document;createElement("div"). const rightDiv3 = document;createElement("div"). const leftDiv = document;createElement("div"). const leftDiv1 = document;createElement("div"). const leftDiv2 = document;createElement("div"). const leftDiv3 = document;createElement("div"). const percentDiv = document;createElement("div"). const percentDiv1 = document;createElement("div"). const percentDiv2 = document;createElement("div"). const percentDiv3 = document;createElement("div"). const numberDiv = document;createElement("div"). const numberDiv1 = document;createElement("div"). const numberDiv2 = document;createElement("div"). const numberDiv3 = document;createElement("div"). const nameDiv = document;createElement("div"). const nameDiv1 = document;createElement("div"). const nameDiv2 = document;createElement("div"). const nameDiv3 = document;createElement("div"). // ADD CLASSLIST pie.classList;add("pie1"). rightDiv.classList;add("slice-right1"). leftDiv.classList;add("slice-left1"). percentDiv.classList;add("percent1"). numberDiv.classList;add("number1"). nameDiv.classList;add("name1"). pie1.classList;add("pie1"). rightDiv1.classList;add("slice-right1"). leftDiv1.classList;add("slice-left1"). percentDiv1.classList;add("percent1"). numberDiv1.classList;add("number1"). nameDiv1.classList;add("name1"). pie2.classList;add("pie1"). rightDiv2.classList;add("slice-right1"). leftDiv2.classList;add("slice-left1"). percentDiv2.classList;add("percent1"). numberDiv2.classList;add("number1"). nameDiv2.classList;add("name1"). pie3.classList;add("pie1"). rightDiv3.classList;add("slice-right1"). leftDiv3.classList;add("slice-left1"). percentDiv3.classList;add("percent1"). numberDiv3.classList;add("number1"). nameDiv3.classList;add("name1"). //ADD INNERTEXT nameDiv;innerHTML = "HTML". numberDiv;innerHTML = "%99". nameDiv1;innerHTML = "CSS". numberDiv1;innerHTML = "%99". nameDiv2;innerHTML = "BOOTSTRAP". numberDiv2;innerHTML = "%80". nameDiv3;innerHTML = "JAVASCRIPT". numberDiv3;innerHTML = "%75". //APPEND0 pie;appendChild(rightDiv). pie;appendChild(leftDiv). pie;appendChild(percentDiv). percentDiv;appendChild(numberDiv). percentDiv;appendChild(nameDiv). callAllPie;appendChild(pie). //APPEND1 pie1;appendChild(rightDiv1). pie1;appendChild(leftDiv1). pie1;appendChild(percentDiv1). percentDiv1;appendChild(numberDiv1). percentDiv1;appendChild(nameDiv1). callAllPie;appendChild(pie1). //APPEND2 pie2;appendChild(rightDiv2). pie2;appendChild(leftDiv2). pie2;appendChild(percentDiv2). percentDiv2;appendChild(numberDiv2). percentDiv2;appendChild(nameDiv2). callAllPie;appendChild(pie2). //APPEND3 pie3;appendChild(rightDiv3). pie3;appendChild(leftDiv3). pie3;appendChild(percentDiv3). percentDiv3;appendChild(numberDiv3). percentDiv3;appendChild(nameDiv3). callAllPie;appendChild(pie3); }

Answer 1

Like others have already said, you can create a template and show/hide as needed.

If however, you require them to be generated using javascript then you can reduce the number of lines by creating one function to do all the repetitive things you're doing here.

    function createDiv(className, innerHTML, parentDiv)
    {
        const div = document.createElement("div");
        div.classList.add(className);

        if (innerHTML)
        {
            div.innerHTML = innerHTML;
        }

        if (parentDiv)
        {
            parentDiv.appendChild(div);
        }

        return div;
    }

Then simply call it like:

const nameDiv4 = createDiv("name1", "HTML", percentDiv);

Which would be the equivalent of doing:

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