如何添加 div 并稍后再选取它

Question

我认为这是 IE 6.0 特有的，但是......

在 JavaScript 中我添加了一个 div 到 DOM。我分配一个 id 属性。当我稍后尝试拿起 div 由 id 我得到的只是 null.

有什么建议么？

例子：

var newDiv = document.createElement("DIV");
newDiv.setAttribute("ID", "obj_1000");
document.appendChild(newDiv);

alert("Added:" + newDiv.getAttribute("ID") + ":" + newDiv.id + ":" + document.getElementById("obj_1000") );

警报打印 "::null"

似乎在 Firefox 2.0+ 中工作正常

Answer 1

除了其他答案所建议的内容之外（您需要实际将元素插入到 DOM 中才能通过 getElementById()），您还需要使用小写的属性名称，以便 IE6 将其识别为 id:

var newDiv = document.createElement("DIV"); 
newDiv.setAttribute("id", "obj_1000");
document.body.appendChild(newDiv);

alert("Added:"
   + newDiv.getAttribute("id") 
   + ":" + newDiv.id + ":" 
   + document.getElementById("obj_1000") );

...按预期响应：

Added:obj_1000:obj_1000:[object]

---

根据 MSDN 文档 为了 setAttribute(), ，直到 IE8 有一个可选的 第三个参数 控制属性名称是否区分大小写。猜猜默认值是什么...

Answer 2

需要将 div 添加到元素中才能成为文档的一部分。

document.appendChild(newDiv);

alert( document.getElementById("obj_1000") );

Answer 3

您必须将 div 添加到 dom 中。

// Create the Div
var oDiv = document.createElement('div');
document.body.appendChild(oDiv);

Answer 4

newDiv.setAttribute( "ID", "obj_1000" );

应该

newDiv.id = "obj_1000";

Answer 5

嗯，谢谢你们让我走上正轨，伙计们……这很奇怪，但事实证明，如果我将大小写改为小写，一切都会开始正常工作……

最终结果：

var newDiv = document.createElement("DIV");
newDiv.setAttribute("id", "obj_1000");
document.appendChild(newDiv);

alert("Added:" +
      newDiv.getAttribute("id") + ":" +
      newDiv.id + ":" +
      document.getElementById("obj_1000"));

奇怪...非常奇怪