从一个盒子创建多个盒子

Question

我正在尝试从一个盒子创建多个盒子。 但我是 HTML 的新手，不知道该怎么做。 我需要：我需要一盒； 通过单击它，将创建两个新框，下一次将创建四个框。

 let elements = document.getElementsByClassName('box'); for(var i = 0; i < elements.length; i++) { console.log(elements[i]); }

 .box { width: 100px; height: 100px; border: 1px solid green; background: steelblue; }

 <div class="box"></div>

Answer 1

一旦我使用jQuery ，你可以尝试下面的代码。

这是代码片段：

 $(document).on('click', '.box', function(){ $(".box").clone().eq(0).insertAfter( ".box" ); var i = 1; $('.box').each(function() { $(this).html(i); i++; }); });

 .box { width: 100px; height: 100px; border: 1px solid green; background: steelblue; display: inline-block; margin: 4px; font-size: 15pt; text-align: center; vertical-align: middle; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="box">1</div>

Answer 2

这是我的尝试（香草 JS）：

 let boxesToCreate = 2; createBoxesOnClick = (box) => { box.addEventListener("click", () => { for(let i = 0; i < boxesToCreate; i ++){ let newBox = document.createElement("div"); newBox.classList.add("box"); newBox.textContent=boxesToCreate + i; createBoxesOnClick(newBox); document.body.appendChild(newBox); } boxesToCreate = boxesToCreate * 2; }) } let firstBox = document.querySelector(".box"); createBoxesOnClick(firstBox);

 body{ display:flex; flex-wrap:wrap; }.box { width: 100px; height: 100px; border: 1px solid green; background: steelblue; }

 <div class="box">1</div>

我不确定将新元素注册到事件的最佳方法，所以我制作了 function 将新框注册到onClick ：

• 我创建 x ( boxToCreate ) 盒子
• box class
• 添加文本以检查框号
• 使用 function 将框注册到 onClick()
• Append 新箱到集装箱（本体）
• 将boxToCreate乘以 2。请注意，对于您的问题，我们无法判断您是否要将每次创建的数量增加 x2 或 +2，您只需将boxesToCreate = boxesToCreate * 2更改为boxesToCreate = boxesToCreate + 2 。

Answer 3

这将从生成的预览中增加框 + 2

如果您愿意，可以将 box_num += 2 更改为 box_num *= 2 这将增加 box * 2 从 previerws 生成

 let box_num = 2 let num = 1 $(document).on('click', '.box', function(){ let html = ''; for(let i = 0; i < box_num; i++){ html += `<div class="box">${num + 1}</div>` num++ } $('.container').append(html) box_num += 2 })

 .box { width: 100px; height: 100px; border: 1px solid green; background: steelblue; display: inline-block }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"><div class="box">1</div></div>