Установка наблюдателя MutationObserver
 

Здравствуйте!
Подскажите, пожалуйста,.. возникло несколько вопросов по ниже приведенному коду.
Нужно отследить появления элемента...
Вопрос:
Здесь указываем тот элемент, в котором ожидаем появления нужного нам элемента, или тот элемент, появления которого мы ожидаем?: document.querySelector('#some-id');

// выбираем нужный элемент для наблюдения
var target = document.querySelector('#some-id');

// если jQuery
var target = $('#some-id')[0];
 
// создаем новый экземпляр наблюдателя
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});
 
// создаем конфигурации для наблюдателя
var config = { attributes: true, childList: true, characterData: true };
 
// запускаем механизм наблюдения
observer.observe(target,  config);
 
// позже, если надо, прекращаем наблюдение
observer.disconnect();

:-?

Т.е. target - это элемент, за которым Observer будет наблюдать.

А mutations.forEach(function(mutation)({}) что делает? При каждом изменении DOM ищет тот элемент, за которым установлено наблюдение?

:-?

Подскажите, пожалуйста, почему ошибка?: Uncaught NotFoundError: Failed to execute 'observe' on 'MutationObserver': The provided node was null

// выбираем элемент, который должен появится в DOM
               var target = document.querySelector("#message-list");

function track_send(){
              
	var observer = new MutationObserver(function(mutations) { 
		mutations.forEach(function(mutation) {
                                               alert("Сработало!");  
                                    
		});
	});

	var config = { attributes: true, childList: true, characterData: true };

	observer.observe(target, config);
           
}

 $("div[data-name='send']").click(function(){
        track_send();
       //.............
});

фантастика! как можно выбрать, то чего нет?

Не понял. Тогда, нужно проверку что ли ставить? А иначе, как узнать то, что появился на страницы именно тот элемент, который нужен?
Как мне узнать, когда на странице появится $('div#some-id'); ???

DDim1000, установите слушателя на родительский элемент относительно вашего div#some-id и слушайте изменения детей.

Что-то у меня не получается.... Посмотрите, пожалуйста, код: https://jsfiddle.net/z9q3kn6w/1/

Вы наблюдатель ставите на элемент, который еще не существует.

var target = document.querySelector(".pkujhh > #mess"); // null !!!
observer.observe(target, config);

Нет его еще. Он только будет когда то создан и вставлен в body.

Наблюдатель ставят на элемент, В который будут что то вставлять.

А откуда я тогда узнаю, что появился именно тот элемент, появления которого я хочу отследить?

Просматриваете все мутации
Если тип нужный (MutationRecord.type === "childList"), то в MutationRecord.addedNodes будет коллекция вставленных узлов. Перебираете ее и смотрите тот узел или не тот. По id или с помощью matches
https://developer.mozilla.org/en-US/...MutationRecord

var observer = new MutationObserver(function(mutations) { 
		mutations.forEach(function(mutation) {
                 if ( mutation.type ===  'childList')    {
                     mutation.addedNodes.forEach (addn => {
                             if (addn.id === 'mess') console.log('YES!!!')
                       })
                 }                         
		});
	});

var config = { attributes: true, childList: true, characterData: true };

	observer.observe(document.body, config);