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元素而出错。我不知道这是代码中的错误，还是帖子中的不完整样本。

Answer 3

另一个想法 - 你正在为不同的元素重用'openMonth'id，即使你先移除前一个元素，这可能也是个问题。

你可以尝试使用一个类而不是id，或者你可以使用'当前月元素'来保存一个全局变量。

Answer 4

仅当您在创建元素时为其指定id时，它才有效。我记得当我是动态的肌动蛋白元素时，我会为id设置一个计数器，或者如果从数据库中检索数据，我会使用行ID。

我将使用元素的innerHTML字段创建元素并将元素作为文本插入，然后渲染引擎将从那里获取它。这不是最好的方法，但它非常快我，你有点匆忙......

希望有所帮助

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

4 个答案: