Как я могу определить, был ли добавлен динамически созданный элемент DOM в DOM?

Вам нужно событие DOMNodeInserted (или DOMNodeInsertedIntoDocument).

Обновлено: вполне возможно, что эти события не поддерживаются IE, но я не могу это проверить прямо сейчас.

Можете ли вы сделать document.getElementById('newElementId'); и посмотреть, вернет ли это значение. Если нет, как вы говорите, подождите 100 мс и попробуйте еще раз?

Ни одно из событий DOMNodeInserted или DOMNodeInsertedIntoDocument не поддерживается в IE. Другой отсутствующей в IE [only] функции DOM является функция compareDocumentPosition, которая предназначена для выполнения того, что предлагает ее название.

Что касается предлагаемого решения, я думаю, что нет лучшего (если вы не сделаете какие-то грязные трюки, такие как перезапись реализаций собственных членов DOM)

Также исправляем заголовок вопроса: динамически созданный элемент является частью DOM с момента его создания, он может быть добавлен к фрагменту документа или к другому элементу, но не может быть добавлен к документу.

Я также думаю, что описанная вами проблема - это не та проблема, которая у вас есть, это скорее одно из возможных решений вашей проблемы. Вы, наверное, можете подробно объяснить вариант использования?

Вы можете запросить document.getElementsByTagName ("*"). length или создать пользовательскую функцию appendChild, как показано ниже:

var append = function(parent, child, onAppend) {
  parent.appendChild(child);
  if (onAppend) onAppend(child);
}

//inserts a div into body and adds the class "created" upon insertion
append(document.body, document.createElement("div"), function(el) {
  el.className = "created";
});

Обновлять

По запросу добавление информации из моих комментариев в свой пост

Сегодня в библиотеке Peppy на Ajaxian был комментарий Джона Ресига, который, казалось, предполагал, что его библиотека Sizzle могла бы обрабатывать события вставки DOM. Мне любопытно узнать, будет ли код для работы с IE.

Следуя идее опроса, я прочитал, что некоторые свойства элемента недоступны, пока элемент не будет добавлен к документу (например, element.scrollTop), возможно, вы могли бы опросить это вместо того, чтобы выполнять весь обход DOM.

И последнее: в IE есть один подход, который стоит изучить - поиграть с событием onpropertychange. Я считаю, что добавление его в документ обязательно вызовет это событие по крайней мере для одного свойства.

В идеальном мире вы можете зацепить события мутации. Сомневаюсь, что они надежно работают даже в стандартных браузерах. Похоже, вы уже реализовали событие мутации, поэтому вы могли бы добавить его, чтобы использовать собственное событие мутации, а не опрос тайм-аута в браузерах, которые их поддерживают.

Я видел реализации изменения DOM, которые отслеживают изменения, сравнивая document.body.innerHTML с последним сохраненным .innerHTML, что не совсем элегантно (но работает). Поскольку в конечном итоге вы собираетесь проверить, добавлен ли еще конкретный узел, вам лучше просто проверять это каждое прерывание.

Я могу придумать улучшения используя .offsetParent, а не .parentNode, так как это, скорее всего, вырежет несколько родителей из вашего цикла (см. Комментарии). Или использование compareDocumentIndex() на всех, кроме IE, и тестирование свойств .sourceIndex для IE (должно быть -1, если узел не находится в DOM).

Это также может помочь: Реализация X browser compareDocumentIndex от Джона Ресига.

ОБНОВЛЕНИЕ: для всех, кого это интересует, вот реализация, которую я наконец использовал:

function isInDOMTree(node) {
   // If the farthest-back ancestor of our node has a "body"
   // property (that node would be the document itself), 
   // we assume it is in the page's DOM tree.
   return !!(findUltimateAncestor(node).body);
}
function findUltimateAncestor(node) {
   // Walk up the DOM tree until we are at the top (parentNode 
   // will return null at that point).
   // NOTE: this will return the same node that was passed in 
   // if it has no ancestors.
   var ancestor = node;
   while(ancestor.parentNode) {
      ancestor = ancestor.parentNode;
   }
   return ancestor;
}

Причина, по которой я хотел это, - предоставить способ синтезировать событие onload для элементов DOM. Вот эта функция (хотя я использую что-то немного другое, потому что я использую ее вместе с MochiKit):

function executeOnLoad(node, func) {
   // This function will check, every tenth of a second, to see if 
   // our element is a part of the DOM tree - as soon as we know 
   // that it is, we execute the provided function.
   if (isInDOMTree(node)) {
      func();
   } else {
      setTimeout(function() { executeOnLoad(node, func); }, 100);
   }
}

Например, эту настройку можно использовать следующим образом:

var mySpan = document.createElement("span");
mySpan.innerHTML = "Hello world!";
executeOnLoad(mySpan, function(node) { 
   alert('Added to DOM tree. ' + node.innerHTML);
});

// now, at some point later in code, this
// node would be appended to the document
document.body.appendChild(mySpan);

// sometime after this is executed, but no more than 100 ms after,
// the anonymous function I passed to executeOnLoad() would execute

Надеюсь, что это будет кому-то полезно.

ПРИМЕЧАНИЕ. Причина, по которой я остановился на этом решении, а не на Ответ Дэррила, заключалась в том, что метод getElementById работает только в том случае, если вы находитесь в одном документе; У меня есть несколько фреймов на странице, и страницы взаимодействуют между собой сложным образом - когда я пробовал это, проблема заключалась в том, что он не мог найти элемент, потому что он был частью другого документа, чем код, в котором он выполнялся. .

Вот еще одно решение проблемы, извлеченное из кода jQuery. Следующая функция может использоваться, чтобы проверить, подключен ли узел к DOM или он «отключен».

function isDisconnected( node ) {
    return !node || !node.parentNode || node.parentNode.nodeType === 11;
}

NodeType === 11 определяет DOCUMENT_FRAGMENT_NODE, который является узлом, не связанным с объектом документа.

Для получения дополнительной информации см. Следующую статью Джона Ресига: http://ejohn.org/blog/dom-documentfragments/

Самый простой ответ - использовать метод Node.contains, поддерживаемый Chrome, Firefox (Gecko), Internet Explorer, Opera и Safari. Вот пример:

var el = document.createElement("div");
console.info(document.body.contains(el)); // false
document.body.appendChild(el);
console.info(document.body.contains(el)); // true
document.body.removeChild(el);
console.info(document.body.contains(el)); // false

В идеале мы должны использовать document.contains(el), но это не работает в IE, поэтому мы используем document.body.contains(el).

К сожалению, вам все еще нужно опросить, но проверить, есть ли элемент в документе, очень просто:

setTimeout(function test() {
  if (document.body.contains(node)) {
    func();
  } else {
    setTimeout(test, 50);
  }
}, 50);

Если вы в порядке с добавлением CSS на свою страницу, вот еще один умный метод, который использует анимацию для обнаружения вставок узлов: http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/

Вместо того, чтобы идти по дереву DOM до элемента документа, просто используйте element.ownerDocument. см. здесь: https://developer.mozilla.org/en-US/docs/DOM/Node.ownerDocument и сделайте так:

element.ownerDocument.body.contains(element)

и ты в порядке.

MutationObserver - это то, что вы должны использовать, чтобы определить, когда элемент был добавлен в DOM. MutationObservers теперь широко поддерживаются во всех современных браузерах (Chrome 26+, Firefox 14+, IE11, Edge, Opera 15+ и т. д.).

Вот простой пример того, как вы можете использовать MutationObserver для прослушивания, когда элемент добавляется в DOM.

Для краткости я использую синтаксис jQuery для создания узла и вставки его в DOM.

var myElement = $("<div>hello world</div>")[0];

var observer = new MutationObserver(function(mutations) {
   if (document.contains(myElement)) {
        console.info("It's in the DOM!");
        observer.disconnect();
    }
});

observer.observe(document, {attributes: false, childList: true, characterData: false, subtree:true});

$("body").append(myElement); // console.info: It's in the DOM!

Обработчик событий observer срабатывает всякий раз, когда какой-либо узел добавляется или удаляется из document. Затем внутри обработчика мы выполняем проверку contains, чтобы определить, находится ли сейчас myElement в document.

Вам не нужно перебирать каждую MutationRecord, хранящуюся в mutations, потому что вы можете выполнить проверку document.contains непосредственно после myElement.

Для повышения производительности замените document конкретным элементом, который будет содержать myElement в модели DOM.