Javascript 如何访问在两个位置具有相同id的页面上的特定div？

这是与此相同的问题：

除了一件事

有两个具有相同ID的元素的原因是，我正在向表中添加行，并且通过将行的内容作为模板创建一个隐藏的div来实现。我创建了一个新的div，将模板的innerhtml复制到我的新div中，然后我只想编辑其中的一部分，但是所有的部分都与模板具有相同的ID

我可以一个元素一个元素地动态创建行元素，但它是一个非常复杂的行，并且只需要更改一些内容，因此从模板复制并更改需要更改的一些内容就容易多了

那么，我如何引用副本中的元素，而不是模板？ 我不想弄乱模板本身，否则我将永远无法获得第二次使用的位

---

或者有其他更简单的方法来解决这个问题吗？

页面上的ID应该是唯一的，即使您从模板克隆它们

如果在页面上动态创建内容，则必须将新克隆元素的id更改为其他内容。如果要访问所有克隆的元素，但不访问模板，可以向其添加类，以便引用该类的所有元素：

var clonedElement = template.cloneNode(yes); // make a deep copy
clonedElement.setAttribute("id", "somethingElse"); // change the id
clonedElement.setAttribute("class", 
  clonedElement.getAttribute("class") + " cloned"
);

要按类名访问所有克隆的元素，可以使用

getElementsByClassName

方法（在较新的浏览器中提供），或者查看此答案以获得更深入的解决方案：

或者，如果您有可用的jQuery，那么您可以用更少的代码行来实现这一点：

$("#template").clone().attr("id","somethingElse")
  .addClass("cloned").appendTo("#someDiv");

类查找更简单：

$(".cloned").doSomethingWithTheseElements();

尽量避免在克隆结构的子元素中使用ID，因为在将克隆添加到页面之前，应更改克隆元素的所有ID。相反，您可以使用新id引用父元素，并使用类名遍历结构的其余部分。类名不需要是唯一的，所以可以保持原样

如果您确实必须使用ID（或表单字段中唯一的“name”属性），我强烈建议您使用jQuery或Prototype之类的框架来处理DOM遍历；否则，解决所有跨浏览器问题是一个相当大的负担。下面是使用jQuery对结构进行更深层次更改的示例：

$("#template").clone().attr("id","somethingElse")
  .addClass("cloned") // add a cloned class to the top element
  .find("#foo").attr("id","bar").end() // find and modify a child element
  .appendTo("#someDiv"); // finally, add the node to the page

---

在处理innerHtml时，对该行的ID进行替换可能是最简单的。也许像

var copiedRow = templateRow.innerHTML.replace(/id=/g,"$1copy")

---

这将使复制的div前缀为“copy”。对于有多个副本的情况，您可以通过保留一个计数器并将该计数变量添加到

replace（）

调用中来进一步开发此功能

当您想要制作一个模板并多次使用它时，最好使用DOM，例如在documentFragment中。 这样它就不会响应“live”DOM中的document.getElementById（）调用。 我在这里举了一个例子：

id在页面上应该是唯一的

---

PM5544…

实际上，即使您的文档可能无效，也无法将ID更改为唯一的ID

浏览器的选择器引擎将ID视为类名。因此，您可以使用

document.querySelector('#myCopy #idToLookFor');

---

获取副本。

看看我那难看但实用的奶酪。我编写了一个类似于getelementbyid的函数，但您给它一个开始节点，而不是文档。工作起来很有魅力。它可能效率低下，但我对运行当今浏览器javascript引擎的微处理器非常信任

function getelement(node, findid) 
  {
    if (node)
      if (node.id)
        if (node.id == findid)
          return node;
    node = node.firstChild;
    while(node) 
      {
        var r = getelement(node, findid);
        if (r != null)
          return r;
        node = node.nextSibling;
      }
    return null;
  }

---

当你复制这一行时，你不就有了对它的引用吗？在那一点上你不能改变身份证吗

“id”属性确实需要是唯一的；这就是为什么它被称为“id”（“身份”）。因此，您的模板不应该包含具有“id”值的元素。当然，你可以用模板变量来创建“id”值。你说的模板变量是什么意思？谷歌没有回答我这个问题。如果你使用的是模板系统，它（可能）允许在模板扩展时绑定一些数据。如果你所说的“模板”只是指“要复制的内容块”，那么没关系：-）如果你展示了你当前在问题中使用的代码，那会很有帮助。从未听说过一个片段，我会去看看这个。我知道你所说的概念，但我不知道如何在克隆中更改类或id，因为我找不到它们。克隆也将具有相同的类名。您的示例显示了更改克隆元素的类，该类将是父元素，但还有许多其他嵌套节点，我还必须更改的类或id，如何获得这些？一般的想法是在将克隆元素添加到页面之前修改它。在javascript中克隆DOM元素将返回对克隆元素的引用。使用GetElementsByCassName和类似方法，可以遍历此元素并在将其添加到页面之前对其进行修改。如果使用纯javascript执行此操作，则很容易遇到跨浏览器问题。因此，如果您需要修改很多元素，我强烈建议您使用框架。我在我的答案中添加了这样一个修改的例子。在使它工作后，我花了一天时间与IE进行斗争，因为它对使用innerHTML更改表的定义很挑剔。我发现很多人都有同样的问题，大多数建议都没有帮助。最重要的是tr是tbody而不是table的子元素。我自己艰难地发现，你不能tr.innerHTML='blah'你必须创建元素tr和createelement td，将td附加到tr，然后td.innerHTML='blah'；这是我在IE中唯一需要做的事情。希望它能帮助别人。我需要行中的东西，并且行中的所有东西都与我从中复制它的行具有相同的ID。好吧，在firefox和chrome中工作得很好的是将TR的innerHTML放入我添加到表中的新TR中。IE不买它，因为即使它