如何在 javascript 中创建动态表单域

Question

我想创建一个动态表单，就像用户需要添加属性一样，但是那些以前没有定义的属性他可以添加尽可能多的，例如他创建了一件衣服，他想添加尺寸等属性，他会点击添加将生成 html 的属性我已经这样做了但是我需要插入一些变量以便我可以更改属性的名称

var i =1;
function add_fields() {
    var emptydiv = document.createElement('div')
    emptydiv.innerHTML = '<div class="col-12 col-md-6"><div class="group"><input type="text" name="`{i}`" id="Royalties" required><span class="highlight"></span><span class="bar"></span><label>Attributes</label></div></div><div class="col-12 col-md-6"><div class="group"><input type="text" name="Size" id="Size" required><span class="highlight"></span><span class="bar"></span><label>value</label></div></div></div>'
    document.getElementById('addable').appendChild(emptydiv);
    i++;
    console.log(i)
    return emptydiv;     
    // console.log("Hello world")                   
}

我想通过变量 i

更改此 html 中的名称字段

Answer 1

我相信这就是你想要完成的。

我将常规单引号更改为模板文字

var i =1;
function add_fields() {
    var emptydiv = document.createElement('div')
    emptydiv.innerHTML = `<div class="col-12 col-md-6"><div class="group"><input type="text" name="${i}" required><span class="highlight"></span><span class="bar"></span><label>Attributes</label></div></div><div class="col-12 col-md-6"><div class="group"><input type="text" name="Size" id="Size" required><span class="highlight"></span><span class="bar"></span><label>value</label></div></div></div>`
    document.getElementById('addable').appendChild(emptydiv);
    i++;
    console.log(i)
    return emptydiv;     
    // console.log("Hello world")                   
}

add_fields();

<div id="addable"></div>

如何在 javascript 中创建动态表单域

how to create the dynamic form fields in javascript

javascript

django-forms

javascript-objects