Javascript 插入之前之后忘记的childNodes特定值

我编写了一个简单的脚本，在用户需要时添加额外的表单字段：html部分由第一部分组成，我在其中定义表单字段模式，第二部分为插入模式做好准备

<div id="readroot" style="display: none">
    <input type="text" value="test" id="name" name="name">
</div>

<form method="post" action="index.php">

    <span id="writeroot"></span>

    <a href=# onclick="moreFields();">Add record</a>
    <input type="submit" value="Confirm" />

</form>

javascript部分必须准确地复制“writeroot”跨度之前的“readroot”div。事实上，它复制了所有内容，除了输入字段的“名称”、“id”、“值”（或者，可能我无法处理它们）。我还尝试在字段“放置”后单击一次以检测字段名称，但它没有返回正确的名称

<script type="text/javascript">
  var counter = 0;
  window.onload = moreFields();

  function moreFields() {
     counter++;
     var newFields = document.getElementById('readroot').cloneNode(true);
     newFields.id = 'baba';
     newFields.style.display = 'block';
     var newField = newFields.childNodes;
     for (var i=0;i<newField.length;i++) {
        var theName = newField[i].name;
        if (theName)
           newField[i].name = theName + counter;
           newField[i].onclick = alert(this.name);
    }
    var insertHere = document.getElementById('writeroot');
    inserted = insertHere.parentNode.insertBefore(newFields,insertHere);
    }
</script>

var计数器=0；
window.onload=moreFields（）；
函数moreFields（）{
计数器++；
var newFields=document.getElementById（'readroot'）.cloneNode（true）；
newFields.id='baba'；
newFields.style.display='block'；
var newField=newFields.childNodes；
对于（var i=0；i您正在以错误的方式设置
单击
事件处理。您正在立即调用
警报
，在此上下文中，
此
将引用
窗口
对象

应该是：

newField[i].onclick = function() {alert(this.name);};

对我来说似乎很好：


输入字段的
名称
已正确更改，id已存在。如果您多次添加元素，则还必须将
baba
id和
名称
id更改为唯一的内容


问题是您是否需要ID。您必须唯一地标识字段吗？使用类可能就足够了。例如：

<div id="readroot" style="display: none">
    <input type="text" value="test" name="name" class="inputClass">
</div>



及

var readroot=document.getElementById（'readroot'），
writeroot=document.getElementById（'writeroot'）；
函数moreFields（）{
计数器++；
var newFields=readroot.cloneNode（true）；
newFields.removeAttribute（'id'）；
newFields.className+='fieldContainer'；
var newFields=newFields.childNodes；
for（var i=0，l=newField.length；i

然后，您可以通过设置
.fieldContainer
的CSS规则来控制可见性。这似乎是可行的：

  var counter = 0;
  window.onload = moreFields();

  function moreFields() {
     counter++;
     var newFields = document.getElementById('readroot').cloneNode(true);
     newFields.id = 'baba' + counter;
     newFields.style.display = 'block';
     var newField = newFields.childNodes;
     for (var theName, i = newField.length; i--;) {
        if (theName = newField[i].name) {
           newField[i].name = theName + counter;
           newField[i].onclick = confirm (newField[i].name);
        }   
    }
    var insertHere = document.getElementById('writeroot');
    inserted = insertHere.parentNode.insertBefore(newFields,insertHere);
    }

我将计数器添加到newFields id和警报中（更改为确认）您使用了这个而不是newfields。
javascript控制台中的任何内容？代码中动态更改的名称/id看起来相当可疑，我猜是一个错误导致了您的脚本死亡。您添加的所有字段不是都有相同的div id:“baba”？而且输入元素都将有id“name”（您不更改它们）。在stackoverflow上插入时，我留下了一个选项卡，因此有一行被隐藏，现在名称可能会更改，但它不会更改！（警告会在window.onload和not onclick！！）单击处理程序仍然错误。您必须为
onclick
指定一个函数
确认
不返回函数。
  var counter = 0;
  window.onload = moreFields();

  function moreFields() {
     counter++;
     var newFields = document.getElementById('readroot').cloneNode(true);
     newFields.id = 'baba' + counter;
     newFields.style.display = 'block';
     var newField = newFields.childNodes;
     for (var theName, i = newField.length; i--;) {
        if (theName = newField[i].name) {
           newField[i].name = theName + counter;
           newField[i].onclick = confirm (newField[i].name);
        }   
    }
    var insertHere = document.getElementById('writeroot');
    inserted = insertHere.parentNode.insertBefore(newFields,insertHere);
    }