使用javascript动态添加重复（唯一ID）表单Div元素答案

【问题标题】：Dynamically adding duplicate (unique ID) form Div elements using javascript使用javascript动态添加重复（唯一ID）表单Div元素
【发布时间】：2012-12-14 11:54:57
【问题描述】：

我有一个包含如下字段的表单：

<div class="row">
   <div class="field">
      <input class="" type="text" name="college" id="college"/>
   </div>

   <div class="field">
      <input class="" type="text" name="city" id="city"/>
   </div>

   <div class="field">
      <input class="" type="text" name="zip" id="zip"/>
   </div>
</div>
<input type="button" class="buttonWidth" id="btnAddressAdd" value="Add Worksite Addressess"/>

我有一个添加额外地址按钮，可以将另一个 div“行”副本添加到页面。我需要将页面中的所有数据作为请求发送到控制器。如何编写一个脚本，在单击按钮时添加额外的 div 副本，并将唯一的 id 附加到每个新字段？

【问题讨论】：

你使用像 jQuery 或 Prototype 这样的 javascript 框架吗？
我正在开发一个代码库，它使用纯 JavaScript 和 DOJO 来实现其内置功能。我必须坚持这些编码实践本身。 :(
重新标记到道场，那些怪胎会帮助你这么努力。

标签： java javascript spring jsp dojo

【解决方案1】：

查看 Dojo 中的工作示例：http://jsfiddle.net/phusick/PeQCN/

plain vanilla JavaScript 中的代码相同：http://jsfiddle.net/phusick/Rceua/

Dojo 版本使用@Peter Rader 提到的dojo/_base/lang::clone：

// var lang    = require("dojo/_base/lang");
// var array   = require("dojo/_base/array");
// var query   = require("dojo/query");
// var domAttr = require("dojo/dom-attr");

var counter = 0;

function duplicate(/*Node*/sourceNode, /*Array*/attributesToBump) {
    counter++;
    var out = lang.clone(sourceNode);
    if (domAttr.has(out, "id")) { out.id = bump(out.id); }

    query("*", out).forEach(function(node) {
        array.forEach(attributesToBump, function(attribute) {
            if (domAttr.has(node, attribute)) {
                domAttr.set(node, attribute, bump(domAttr.get(node, attribute)));
            }        
        })
    });

    function bump(/*String*/str) {
        return str + "_" + counter;
    }

    return out;
}

如何使用前面提到的duplicate函数：

// var dom          = require("dojo/dom");
// var domConstruct = require("dojo/dom-construct");

var sourceNode = dom.byId("fieldset");
var node = duplicate(sourceNode, ["id", "name", "placeholder"]);  
domConstruct.place(node, sourceNode, "after");

【讨论】：

【解决方案2】：

我已经编写了代码来实现这一点。

逻辑：
1) 获取所需父级的 innerHTML
2) 替换文本中的 id
3) 插入新的 html

查看working code

请原谅我在 JS 部分的编码风格不好。我不习惯直接在 DOM 上编码。我更喜欢 JQuery。

【讨论】：

【解决方案3】：

试试

使用这个snipplet（见用法） http://dojotoolkit.org/reference-guide/1.8/dojo/_base/lang.html#dojo-base-lang-clone

【讨论】：