getElementById是否适用于javascript创建的元素？

Question

当我点击链接时,我创建了两个函数来加载我博客存档部分中一个月的展开视图:

// Load open view of a month in the Archive section
function loadMonth(date) {
  // Remove other open month
     removeMonth();

  // Hide opening month's link
  // Define variable to hold month anchor tag
     var monthLink = document.getElementById(date); 
     monthLink.style.display = "none"; // Hide month anchor

  // Define new open month node and its attributes
     var openMonth = document.createElement("div");
     openMonth.setAttribute("id", "openMonth");
     openMonth.innerHTML = "Testing one, two, three.";

  // Insert open month
  // Define a variable to hold the archive Div node
     var archive = document.getElementById("archive");
  // Insert the open month in the archive node before it's link
     archive.insertBefore(openMonth,monthLink);

     return;
  }


// Close full view of a month and replace with respective link
function removeMonth() {

  // Define global function vars
     var archive = document.getElementById("archive"); // Define a var to hold the archive Div node
     var openMonth = document.getElementById("openMonth"); // Define var to hold the open month Div node

  // Get date of full view month for replacement anchor tag where ID = date
     var month = openMonth.getElementsByTagName("span")[0].innerHTML; // Define var to hold the name of the open month
     var date = (new Date(month + " 15, 2008").getMonth() + 1); // Define var to hold the numerical equivalent of the month
     var year = archive.getElementsByTagName("h3")[0].innerHTML.split(" "); // Define var to hold the year being displayed in the archive
     date = year[1] + "" + date; // Change date var to string and insert year

  // Remove the open month
     archive.removeChild(openMonth);

  // Show Link for that month
     document.getElementById(date).className = "big"; // Fixes display error when anchor has class firstLink
     document.getElementById(date).style.display = "inline"; // Returns link from display "none" state
     return;
}

这些函数在原始静态内容上运行时有效,但是当在归档中单击第二个链接时,它们什么都不做.我想知道是否因为我的函数创建的元素不能被document.getElementById调用.也许应该使用另一种访问这些节点的方法,或者也可以用"javascript"创建的元素替换"document"？

任何建议将不胜感激.谢谢.

Answer 1

你应该没问题:

openMonth.id = "openMonth";

getElementById()只有当元素是DOM的一部分时才能工作,但是因为你已经使用insertBefore()它只是一个侧面注释.

这里涉及一个常见的混淆源:名为 "id" 的属性不一定是在底层DTD中定义为元素ID 的属性.在声明性HTML中,它们是自动链接的.使用时setAttribute(),只需创建名为 "id" 的属性即可.元素ID本身可通过.id酒店访问.

编辑

以下适用于我:

function test()
{
  // create element, set ID
  var p = document.createElement("P");
  p.innerHTML = "Look ma, this is a new paragraph!";
  p.id = "newParagraph";

  // make element part of the DOM
  document.getElementsByTagName("BODY")[0].appendChild(p);

  // get element by ID
  var test = document.getElementById("newParagraph");
  alert(test.innerHTML);
}

Answer 2

回答您的主要问题：document.getElementById 确实适用于动态添加的元素。

在示例代码中，您将创建 openMonth div 并设置其innerHTML。然后在删除标签中执行以下操作：

var month = openMonth.getElementsByTagName("span")[0].innerHTML;

openMonth.getElementsByTagName("span")将不存在并且会收到错误，因为没有 span 元素。我不知道这是否是代码中的错误，或者是否只是帖子中不完整的示例。