如何编写html intp javascript

我需要创建一个封装到不同div标记和类中的输入元素。如何用javascript编写此代码？ 我需要的html代码弹出当我点击一个按钮。该按钮可以工作，但它看起来与用普通html编写的written i javascript不同

Html代码：

<div class="form-group">
            <label class="col-md-4 control-label">Indtast ingrediens</label>  
            <div class="col-md-8 inputGroupContainer">
              <div class="input-group">
                <span class="input-group-addon"></span>
                <input Name="ingrediens[<?php echo $i; ?>]" placeholder="Ingrediens" class="form-control"  type="text"> 
              </div>
            </div>
         </div>

        <div class="form-group">
            <label class="col-md-4 control-label">Indtast mængde</label>  
            <div class="col-md-8 inputGroupContainer">
              <div class="input-group">
                <span class="input-group-addon"></span>
                <input Name="antal[<?php echo $i; ?>]" placeholder="Mængden" class="form-control"  type="text"> 
              </div>
            </div>
         </div>
        `

---

当我只使用一个“部分”时，它可以完美地工作，但它不能与两个“部分”的正确css样式一起工作：-（

这是一个完美的使用案例

只需在标记中写入HTML模板，然后用Javascript克隆它：

var button = document.getElementById("clickme"),
    count = 0;
    button.onclick = function() 
    {
    count += 1;

    var my_container = document.getElementById("test");

    var classdiv = document.createElement("div");
    classdiv.setAttribute("class", "form-group");

    var label_ing = document.createElement("label");
    label_ing.setAttribute("class", "col-md-4 control-label");
    label_ing.innerHTML="Indtast ingrediens";

    var label_antal = document.createElement("label");
    label_antal.setAttribute("class", "col-md-4 control-label");
    label_antal.innerHTML="Indtast antal";

    var label_maal = document.createElement("label");
    label_maal.setAttribute("class", "col-md-4 control-label");
    label_maal.innerHTML="Indtast maal";

    var colmd = document.createElement("div");
    colmd.setAttribute("class", "col-md-8 inputGroupContainer");

    var inputgroup = document.createElement("div");
    inputgroup.setAttribute("class", "input-group");

    var span = document.createElement("span");
    span.classList.add("input-group-addon");

    /*
    //hidden
    var hidden = document.createElement('input');
    hidden.setAttribute("name", "id" + [count]);
    hidden.setAttribute("type", "hidden");
    hidden.setAttribute("value", count);
    my_container.appendChild(hidden);
    */

    //ingrediens
    var ingrediens = document.createElement('input');
    ingrediens.setAttribute("name", "opskrift" + [count]);
    ingrediens.setAttribute("type", "text");
    ingrediens.setAttribute("placeholder", "Navnet på ingrediensen" + count);
    ingrediens.setAttribute("class", "form-control");

    inputgroup.appendChild(span);
    inputgroup.appendChild(ingrediens);
    colmd.appendChild(inputgroup);
    classdiv.appendChild(label_ing);
    classdiv.appendChild(colmd);

    my_container.appendChild(classdiv); //udskriver tiil test 


    // Antal
    var antal = document.createElement('input');
    antal.setAttribute("type", "text");
    antal.setAttribute("placeholder", "Antal");
    antal.setAttribute("class", "form-control");
    antal.setAttribute("name", "antal" + [count]);

    inputgroup.appendChild(span);
    inputgroup.appendChild(antal);
    colmd.appendChild(inputgroup);
    classdiv.appendChild(label_antal);
    classdiv.appendChild(colmd);

    my_container.appendChild(classdiv); //udskriver tiil test


    //maal
    var maal = document.createElement('input');
    maal.setAttribute("name", "opskrift" + [count]);
    maal.setAttribute("type", "text");
    maal.setAttribute("placeholder", "maal" + count);
    maal.setAttribute("class", "form-control");

    inputgroup.appendChild(span);
    inputgroup.appendChild(maal);
    colmd.appendChild(inputgroup);
    classdiv.appendChild(label_maal);
    classdiv.appendChild(colmd);

    my_container.appendChild(classdiv);//udskriver tiil test

const template = document.querySelector("#the-template"); // Supposing the template is <template id="the-template">...</template>
const clone = document.importNode(template.content, true);
const input = clone.getElementsByTagName('input')[0];
input.setAttribute('name', 'the-name');
input.setAttribute('placeholder', 'The placeholder');
document.body.appendChild(clone); // Supposing the form groups are appended to the body

const template=document.querySelector（#模板”）；//假设模板是。。。
const clone=document.importNode（template.content，true）；
const input=clone.getElementsByTagName（'input'）[0]；
input.setAttribute（'name'，'the name'）；
setAttribute（'占位符'，'占位符'）；
document.body.appendChild（clone）；//假设表单组被追加到正文中