getElementById是否适用于由javascript创建的元素？ [英] Does getElementById work on elements created by javascript?

问题描述

I've created two functions to load expanded views of a month in the archive section of my blog when it's link is clicked:

// 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？

The functions work when run on the original static content, but when a second link is clicked in the archive, they do nothing. I am wondering if maybe because the elements that were created by my functions cannot be called by document.getElementById. Perhaps a different method of accessing those nodes should be used, or maybe replacing "document" with something that works on javascript created elements too?

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

Any advice would be greatly appreciated. Thanks.

推荐答案

回答你的主要问题： document.getElementById strong> 使用动态添加的元素。

To answer your main question: document.getElementById does work with dynamically added elements.

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

In your sample code you are creating the openMonth div and setting its innerHTML. Then in the remove tag you are doing this:

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

openMonth.getElementsByTagName（span）将不会存在，并且会得到一个错误，因为没有span元素。我不知道这是否是代码中的错误，或者它是否只是一个不完整的示例。

openMonth.getElementsByTagName("span") will not exist and will get an error because there are no span elements. I don't know if this is a mistake in the code or if it is just a incomplete sample in the post.

这篇关于getElementById是否适用于由javascript创建的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！