Работает ли 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?

Любой совет будет принята с благодарностью. Спасибо.

Answer 1

С вами должно быть все в порядке:

openMonth.id = "openMonth";

getElementById() может работать, только если элемент является частью DOM, но поскольку вы уже используете insertBefore(), это просто примечание.

Здесь есть общий источник путаницы: атрибут с именем"id" не обязательно тот, который определен как идентификатор элемента в базовом DTD. В декларативном HTML они связаны автоматически. Когда вы используете setAttribute(), вы не более чем создаете атрибут с именем"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 работает с динамически добавленными элементами.

В вашем примере кода вы создаете div openMonth и устанавливаете его innerHTML. Затем в теге удаления вы делаете это:

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

openMonth.getElementsByTagName("span") не будет существовать и получит ошибку, потому что нет элементов span. Я не знаю, является ли это ошибкой в ​​коде или это просто неполный пример в посте.

Answer 3

Работает, только если вы указали идентификатор элемента при его создании. Я помню, когда я создавал элементы на лету, я устанавливал счетчик для идентификатора, или, если данные были получены из базы данных, я использовал вместо этого идентификатор строки.

Я бы создал элемент, используя поле innerHTML элемента и вставив элемент в виде текста, тогда механизм визуализации возьмет его оттуда. Это не лучший способ сделать это, но это очень быстро, я немного тороплюсь ...

Надеюсь, что помог

Answer 4

Другая идея - вы повторно используете идентификатор 'openMonth' для разных элементов, возможно, это проблема, даже если вы сначала удалите предыдущий элемент.

Вы можете попытаться использовать класс вместо id, или вы можете держать глобальную переменную с «элементом текущего месяца».