Javascript 在java脚本中硬编码，一些减少此代码的建议非常感谢

我曾尝试使用js createElement、setAttribute和appendChild来实现这些功能

原始div

<div class = "form-row" id="components">
    <div class="form-group col-md-3 mb-0">
        <label for="component">Component</label>
        <input type="text" class="form-control" id="component" placeholder ="component" value="">
    </div>
    <div class="form-group col-md-3 mb-0">
        <label for="component">Each price</label>
        <input type="number" class="form-control" id="price" min=0 placeholder = "Each Price" value="">
    </div>
</div>

function components(){
    var x = document.getElementById("components");

    var div1 = document.createElement("div");
    div1.setAttribute("class","form-group col-md-3 mb-0")


    var item = document.createElement("Input");
    item.setAttribute("type","text");
    item.setAttribute("id","item");
    item.setAttribute("value","");
    item.setAttribute("class","form-control");
    item.setAttribute("placeholder","item");

    var div2 = document.createElement("div");
    div2.setAttribute("class","form-group col-md-3 mb-0")

    var price = document.createElement("Input");
    price.setAttribute("type","number");
    price.setAttribute("id","price");
    price.setAttribute("min",0);
    price.setAttribute("value","");
    price.setAttribute("class","form-control");
    price.setAttribute("placeholder","price");

    div1.appendChild(item);
    div2.appendChild(price);

    x.appendChild(div1);
    x.appendChild(div2);
}

---

上述函数使用onclick事件并创建子div。

为什么不设置容器的

innerHTML

function components(){
    var x = document.getElementById("components");
    x.innerHTML += `
<div class="form-group col-md-3 mb-0">
  <label for="component">Component</label>
  <input type="text" class="form-control" id="component" placeholder ="component" value="">
</div>
<div class="form-group col-md-3 mb-0">
  <label for="component">Each price</label>
  <input type="number" class="form-control" id="price" min=0 placeholder = "Each Price" value="">
</div>
    `;
}

---

您是否考虑使用像jQuery这样的东西，或者您更喜欢纯JavaScript？我对jQuery没有太多的了解，所以我在JS中尝试过。但是没有javascript的偏好，我也会向jQuey询问。这个问题更适合你，因为你没有描述你的代码应该做什么。你可能想了解javascript迷你程序/UGLIFIER，我使用ether网页包，或者如果我需要快速访问迷你程序，我使用我多次调用该函数，然后内部html被复制，它第一次创建另一行，第二次调用它创建另外两行，因为内部html被复制（第二次调用总共创建了4行）。

function components(){
    var x = document.getElementById("components");
    x.insertAdjacentHTML('beforeend', `
<div class="form-group col-md-3 mb-0">
  <label for="component">Component</label>
  <input type="text" class="form-control" id="component" placeholder ="component" value="">
</div>
<div class="form-group col-md-3 mb-0">
  <label for="component">Each price</label>
  <input type="number" class="form-control" id="price" min=0 placeholder = "Each Price" value="">
</div>
    `);
}