create Divs With loop-CodePudding

how can i duplicate this code with for loop

<div >
  <div >
    <button >Tech</button>
    <button >Completed</button>
  </div>
  <p >“At risus mauris velit elementum turpis sodales odio gravida porta nec quisque urna ornare justo id libero vel cursus tristique...”</p>
  <div >
    <div >
      <img src="/Svg/Dixit.png" >
      <span >User01</span>
    </div>
    <button >
      <i ></i>
      <span >20</span>
    </button>
    <button >
      <i ></i>
      <span >20</span>
    </button>
  </div>
</div>

Simple Code Like This:--

for(let i = 0; i < 6; i  ) {
contain.innerHTML  = "<div>heloo</div>";
}

Can generate Divs

but How can I generate a long code?

CodePudding user response：

For your use case, you could simply clone the HTML block you want to repeat using cloneNode(), then appendHTML() it to the page

let html = document.querySelector('.Post1');
let destination = document.querySelector('.newhtml');
for (let i = 0; i < 4; i  ) {
  // create the clone
  let newhtml = html.cloneNode(true)
  destination.appendChild(newhtml)
}

<div >
  <div >
    <button >Tech</button>
    <button >Completed</button>
  </div>
  <p >“At risus mauris velit elementum turpis sodales odio gravida porta nec quisque urna ornare justo id libero vel cursus tristique...”</p>
  <div >
    <div >
      <img src="/Svg/Dixit.png" >
      <span >User01</span>
    </div>
    <button >
        <i ></i>
        <span >20</span>
      </button>
    <button >
        <i ></i>
        <span >20</span>
      </button>
  </div>
</div>

<div class='newhtml'> </div>

CodePudding user response：

You mean like this?

using template literals

I added a data example - fill in the missing data yourself

const data = [{user:"user1",totalLike:20},
{user:"user2",totalLike:2},
{user:"user3",totalLike:3}
]
document.getElementById("container").innerHTML = data.map((item,i) => `<div >
  <div >
    <button >Tech</button>
    <button >Completed</button>
  </div>
  <p >“At risus mauris velit elementum turpis sodales odio gravida porta nec quisque urna ornare justo id libero vel cursus tristique...”</p>
  <div >
    <div >
      <img src="/Svg/Dixit.png" >
      <span >${item.user}</span>
    </div>
    <button >
      <i ></i>
      <span >$(item.totalLike}</span>
    </button>
    <button >
      <i ></i>
      <span >20</span>
    </button>
  </div>
</div>`).join("");

<div id="container"></div>

Using template (according to your comment, not interesting):

using template

const container = document.getElementById("container");
const template = document.getElementById("tmpl")
for (let i = 0; i < 6; i  ) {
  const div = template.content.cloneNode(true);
  const firstDiv = div.querySelector("div");
  firstDiv.className = firstDiv.className.replace("X", i)
  const userSpan = div.querySelector(".user")
  userSpan.textContent = `User${i}`
  container.appendChild(div)
}

<div id="container"></div>

<template id="tmpl">
<div >
  <div >
    <button >Tech</button>
    <button >Completed</button>
  </div>
  <p >“At risus mauris velit elementum turpis sodales odio gravida porta nec quisque urna ornare justo id libero vel cursus tristique...”</p>
  <div >
    <div >
      <img src="/Svg/Dixit.png" >
      <span >UserX</span>
    </div>
    <button >
      <i ></i>
      <span >20</span>
    </button>
    <button >
      <i ></i>
      <span >20</span>
    </button>
  </div>
</div>
</template>