每 2 个带有表单组类的 div 添加一个带有标签类的 div答案

【问题标题】：add a div with a class of tab every 2 divs with class of form-group每 2 个带有表单组类的 div 添加一个带有标签类的 div
【发布时间】：2022-09-23 01:51:28
【问题描述】：

如何每 2 个表单组添加一个带有 \"tab\" 类的 div 我正在尝试创建一个步骤表单，但页面构建器正在生成 html 代码。我想看看我能不能用javascript来做我希望最终结果是这样的

enter image description here

<div class=\"tab\">
  <div class=\"form-group\"></div>
  <div class=\"form-group\"></div>
</div>
<div class=\"tab\">
  <div class=\"form-group\"></div>
  <div class=\"form-group\"></div>
</div>
<div class=\"tab\">
  <div class=\"form-group\"></div>
  <div class=\"form-group\"></div>
</div>
<div class=\"tab\">
  <div class=\"form-group\"></div>
  <div class=\"form-group\"></div>
</div>
<div class=\"tab\">
  <div class=\"form-group\"></div>
  <div class=\"form-group\"></div>
</div>

什么是原始标记？

标签： javascript

【解决方案1】：

希望我理解正确。 html

<form id="my-form"> </form>

脚本

    let formElement = document.getElementById('my-form');
    function generateTabs(times){
        for(let i = 0; i< times i++){
            generateTab();
        }
    }
    function generateTab(){
        let tabDiv = document.createElement('div');
        tabDiv.className = 'tab'
        let formGroupDiv = document.createElement('div');
        formGroupDiv.className = 'form-group';
        let secondformGroupDiv = document.createElement('div');
        formGroupDiv.className = 'form-group';
        tabDiv.appendChild(formGroupDiv);
        tabDiv.appendChild(secondformGroupDiv);
        formElement.appendChild(tabDiv);
        }

【讨论】：

【解决方案2】：

是的，这可以通过 JS 来实现。在循环中使用 createElement 和 appendChild。

const container = document.querySelector('.container');
const formGroups = document.querySelectorAll('.form-group');

for(let i = 0; i < formGroups.length; i = i +2){
  const div = document.createElement('div');
  div.className = 'tab';
  div.appendChild(formGroups[i]);
  div.appendChild(formGroups[i+1]);
  container.appendChild(div);
}

.tab {
  background: red;
  margin-bottom: 3px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
}

.form-group {
  background: lightblue;
  height: 10px;
}

<div class="container">
  <div class="form-group"></div>
  <div class="form-group"></div>
  <div class="form-group"></div>
  <div class="form-group"></div>
  <div class="form-group"></div>
  <div class="form-group"></div>
  <div class="form-group"></div>
  <div class="form-group"></div>
  <div class="form-group"></div>
  <div class="form-group"></div>
</div>

【讨论】：