使用Dojo内容动态创建（或复制）div

我必须使用Struts2和Dojo开发一个项目。 我想通过单击按钮来创建一个包含Dojo小部件的div。 例如：

 <s:form data-dojo-type="dijit.form.Form" 
        data-dojo-props="method: 'post',
        action: 'myAction'"
        theme="simple">
    <s:div id="myId">
        <s:textfield
            name="aName"
            data-dojo-type="dijit.form.TimeTextBox"
            data-dojo-props="name: 'aName'" />
        // More Dojo widgets ...
    </s:div>
</s:form>

我想要一个Javascript函数来复制myDiv并将其放在前一个的下面，等等

最终结果可能是这样的：

 <s:form data-dojo-type="dijit.form.Form" 
        data-dojo-props="method: 'post',
        action: 'myAction'"
        theme="simple">
    <s:div id="myId">
        <s:textfield
            name="aName"
            data-dojo-type="dijit.form.TimeTextBox"
            data-dojo-props="name: 'aName'" />
        // More Dojo widgets ...
    </s:div>
    <s:div id="myId_2">
        <s:textfield
            name="aName"
            data-dojo-type="dijit.form.TimeTextBox"
            data-dojo-props="name: 'aName'" />
        // More Dojo widgets ...
    </s:div>
    <s:div id="myId_3">
        <s:textfield
            name="aName"
            data-dojo-type="dijit.form.TimeTextBox"
            data-dojo-props="name: 'aName'" />
        // More Dojo widgets ...
    </s:div>
</s:form>

---

感谢您的帮助

克隆内部带有DIJIT的DOM节点可能有点棘手。dojo.clone函数将克隆dijit的DOM节点，但它不会调用dojo.connect，也不会在dijit注册表中注册它等等。你会得到一个看起来像DIJIT的盒子，但不起作用。认为这有点像复印一本小册子，但不是把书页钉在一起。

最好的办法是在Dojo的解析器解析myDiv之前克隆它。这意味着您不能在Dojo配置中将parseOnLoad设置为true

例如，制作克隆并将其存储在dojo.ready中的某个位置，最后手动运行解析器：

var clonableDiv, 
    numClones = 0;

dojo.ready(function()
{
    clonableDiv = dojo.clone( dojo.byId("myId") );
    dojo.parser.parse();
});

现在，假设您有一个id为myButton的按钮，用于向表单中添加克隆：

dojo.connect("myButton", "onclick", function()
{
    var newClone = dojo.clone(clonableDiv);
    newClone.setAttribute("id", "myId_" + numClones);
    newClone.childNodes[1].setAttribute("data-dojo-props", "name: 'aName_" + numClones + "'");
    dojo.place(newClone, dojo.byId("myId"), "after");
    numClones++;
    dojo.parser.parse(newClone);
}); 

这里有几件事需要注意。首先，您必须确保没有在文档中插入重复的id。输入字段的名称属性也是如此。此外，插入克隆后，还需要显式解析新插入的div

它确实有点混乱，特别是如果您有多个节点或小部件，它们的ID或名称必须确保是唯一的。在某种程度上，以编程方式构建所有内容而不是克隆myId可能也同样整洁。或者，您可以为可重复区域创建自定义小部件