javascript - 如何编写 html intp javascript

Question

我需要创建一个包装到不同 div 标签和类中的输入元素。我如何用 JavaScript 编写这个代码？我需要点击按钮时弹出 html 代码。该按钮可以工作，但它看起来与用 javascript 编写的和用纯 html 编写的不同

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>
        `

我在 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

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

Answer 1

这是 <template> 的完美用例.

只需将您的 HTML 模板写入 <template> 中即可标签，然后 clone用 JavaScript 实现:

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