如何在javascript中创建动态表单字段答案

【问题标题】：how to create the dynamic form fields in javascript如何在javascript中创建动态表单字段
【发布时间】：2023-03-16 13:35:01
【问题描述】：

我想创建一个动态表单，比如用户需要添加属性，但那些之前没有定义的属性他可以添加尽可能多的属性，例如他创建了一件衣服，他想添加属性，比如尺寸，他将点击添加属性将生成一个 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 中的名称字段

【问题讨论】：

没有这样的东西。您可以找到元素（例如 getElementById、querySelector、...）并更改属性或完全替换它。注意：每个文档的 id 应该是唯一的（id="Royalties" 添加数字或使用类代替）。但是，如果您想从字符串呈现 HTML，只需使用模板文字而不是常规单引号。喜欢var a = `<input name="${somevar}">`
你能告诉我具体需要做什么来解决这个问题
谢谢你的兄弟，现在我的代码正在运行
你现在可以回答我会投票
刚刚添加了您的 sn-p 的固定版本

标签： javascript django-forms javascript-objects

【解决方案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();

&lt;div id="addable"&gt;&lt;/div&gt;

【讨论】：