Javascript 正在寻找一种动态添加包含多个表单项的div的方法

我的代码列在下面的列表中

我想这样做，以便我可以添加另一个表格，如果我需要另一个“旅行”，有没有一个简单的方法来做到这一点？我想做隐秘的跳水，但不知道是否还有其他方法

提前谢谢

Html:

Javascript:

  var counter = 1;
  var limit = 34;
  function addInput(centerDynamic){
  if (counter == limit) {
     alert("You have reached the limit of adding " + counter + " inputs");
}
   else{
    var newdiv = document.createElement('div');
    newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>"; 
  document.getElementById(centerDynamic).appendChild(newdiv);
     counter++;
  }
  }

var计数器=1；
风险价值限额=34；
功能添加输入（centerDynamic）{
如果（计数器==限制）{
警报（“您已达到添加“+计数器+”输入的极限”）；
}
否则{
var newdiv=document.createElement（'div'）；
newdiv.innerHTML=“条目”+（计数器+1）+”
”；
document.getElementById（centerDynamic）.appendChild（newdiv）；
计数器++；
}
}

centerDynamic

是

className

，而不是

id

。此外，还有一个

tr

元素，尽管在

html

中没有

table

父元素。尝试用

document.querySelector（“.”+centerDynamic）

替换

document.getElementById（centerDynamic）

，删除

tr

元素

@charset“utf-8”；
/*CSS文档*/
#包裹{
宽度：900px；
保证金：0自动；
}
.centerDynamic{
宽度：500px；
保证金：0自动；
}

驱动程序行输入页


鹰县
顶峰县

驱动程序名称：

行程时间：

首次接送：

城镇：


此行程中的换乘：
对
不


转移驱动器

需要汽车座椅/助力器吗？
汽车座椅
助推器
没有一个




var计数器=1；
风险价值限额=34；
功能添加输入（centerDynamic）{
event.preventDefault（）；
如果（计数器==限制）{
警报（“您已达到添加“+计数器+”输入的极限”）；
}否则{
var newdiv=document.createElement（'div'）；
newdiv.innerHTML=“条目”+（计数器+1）+”
”；
document.querySelector（“.”+centerDynamic）.appendChild（newdiv）；
计数器++；
}
}

复制表单 目标：单击按钮复制表单

解决方案：使用方法和方法

问题：OP的职能总体上不足以处理目标。我们将继续探索解决方案，并试图突出存在差异的某些领域，而不是列出错误的清单

HTML

• #id

  ：OP的代码没有出现重复的id，但我之所以提到这一点，是因为这是一个常见的错误。在复制HTML时，一定要记住这一点

• name

  ：此属性被表单元素广泛使用，与
  一起使用时非常重要。对于每个单选按钮组，我们应始终为每个单选按钮指定一个名称。这可确保仅从组中选择一个单选按钮

• 提示：将

  id

  和

  名称

  分配给
  和表单元素时，只需将它们设置为相同的值（单选按钮除外）即可。要获得一个简短的无偏见的解释，请参见此。还有，我的观点是，如果您在每个表单元素上使用相同的

  名称

  和

  id

  ，那么您就有了所有可用的选项，您不必担心是否使用了正确的选项。请记住，如果可能的话，请尽量保持

  id

  和

  name

  简单而实用，尤其是如果您打算复制和编号它们

CSS 假设这只是一个草稿，而不是一个已完成的项目，我们将不讨论样式的细节。请注意，我已经对CSS进行了重大更改，因此请随意提问或批评

JS 我不能真正把OP的代码看作是拷贝一个表单，它更像是一个扩展：

结果：

 // up to 34 extra identical inputs that don't match up to the original form.

 <br><input type='text' name='myInputs[]'>   

---

请正确缩进代码。请参阅新的

表单

元素是否包含与现有

表单

元素相同的元素？或者，应该只向现有的

表单

添加一个

输入

元素吗？如果您使用的是纯JavaScript，而不是jQuery，为什么您的问题会被标记？相同的表单元素，主div中的所有内容都与原始表单完全相同。不同的输入，具有不同的id，因此它们可以根据一组规则显示。“相同的表单元素，主div中的所有内容都与原始表单完全相同”尝试使用

Node.cloneNode

，

setAttribute

确定，因此我删除了tr元素。将父div作为类而不是id有问题吗？没有，父div使用

类

而不是

id

没有问题；问题是文档中不存在

#centerDynamic

。对不起，我已经摆弄了一段时间了，从一个id转到另一个类，肯定忘了更改一些内容。我唯一的问题是这个片段也不起作用。看起来fiddle有正确的代码。“我唯一的问题是这个代码段也不起作用。”？你能形容“不起作用”吗？显示在stacksnippets的

表单中添加
输入
，如下所示。还请注意，之所以包含
event.preventDefault（）
，是因为
按钮
在
表单中单击
提交
表单
。stacksnippets和jsfiddle应该具有相同的
html
，
js
；你能描述一下这两者有什么不同吗？当我
  var counter = 1;
  var limit = 34;
  function addInput(centerDynamic){
  if (counter == limit) {
     alert("You have reached the limit of adding " + counter + " inputs");
}
   else{
    var newdiv = document.createElement('div');
    newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>"; 
  document.getElementById(centerDynamic).appendChild(newdiv);
     counter++;
  }
  }

 // up to 34 extra identical inputs that don't match up to the original form.

 <br><input type='text' name='myInputs[]'>