CODEWITHSUNDEEP
javascripthtmlmutation-observers
Qix - MONICA WAS MISTREATED
Qix - MONICA WAS MISTREATED

Reputation: 15103

MutationObserver for when parent changes

Is there a way to detect when the parent of an element changes (namely when changing from null to !null -- i.e., when the element is initially added to the DOM) using a MutationObserver? I can't find any documentation that shows how this could be achieved.

I am programmatically creating elements with document.createElement(). I return the created element from a function, but want to create a listener from within the function to react when the element is eventually added to the DOM, without knowing where or which parent it will be added to.

I'm not quite sure how else to phrase this, honestly.

const elem = document.createElement('div');

let added = false;
elem.addEventListener('added-to-dom', () => { added = true; });
// ^ how do I achieve this?

assert(added == false);
document.body.addChild(elem);
assert(added == true);

I don't see what's so hard about understanding this or why it was closed.

Upvotes: 6

Views: 1944

Answers (2)

CertainPerformance
CertainPerformance

Reputation: 370679

An easy but inelegant way is to monkeypatch Node.prototype.appendChild (and, if necessary, Element.prototype.append, Element.prototype.insertAdjacentElement, and Node.prototype.insertBefore) to watch for when an element is added to the DOM:

const elementsToWatch = new Set();
const { appendChild } = Node.prototype;
Node.prototype.appendChild = function(childToAppend) {
  if (elementsToWatch.has(childToAppend)) {
    console.log('Watched child appended!');
    elementsToWatch.delete(childToAppend);
  }
  return appendChild.call(this, childToAppend);
};



button.addEventListener('click', () => {
  console.log('Element created...');
  const div = document.createElement('div');
  elementsToWatch.add(div);
  setTimeout(() => {
    console.log('About to append element...');
    container.appendChild(div);
  }, 1000);
});
<button id="button">Append something after 1000ms</button>
<div id="container"></div>

Mutating built-in prototypes generally isn't a good idea, though.

Another option would be to use a MutationObserver for the whole document, but this may well result in lots of activated callbacks for a large page with frequent mutations, which may not be desirable:

const elementsToWatch = [];
new MutationObserver(() => {
  // instead of the below, another option is to iterate over elements
  // observed by the MutationObserver
  // which could be more efficient, depending on how often
  // other elements are added to the page
  const root = document.documentElement; // returns the <html> element
  const indexOfElementThatWasJustAdded = elementsToWatch.findIndex(
    elm => root.contains(elm)
  );
  // instead of the above, could also use `elm.isConnected()` on newer browsers
  
  // if an appended node, if it has a parent,
  // will always be in the DOM,
  // instead of `root.contains(elm)`, can use `elm.parentElement`

  if (indexOfElementThatWasJustAdded === -1) {
    return;
  }
  elementsToWatch.splice(indexOfElementThatWasJustAdded, 1);
  console.log('Observed an appended element!');
}).observe(document.body, { childList: true, subtree: true });


button.addEventListener('click', () => {
  console.log('Element created...');
  const div = document.createElement('div');
  div.textContent = 'foo';
  elementsToWatch.push(div);
  setTimeout(() => {
    console.log('About to append element...');
    container.appendChild(div);
  }, 1000);
});
<button id="button">Append something after 1000ms</button>
<div id="container"></div>

Upvotes: 2

Jan
Jan

Reputation: 2853

You could listen for the DOMNodeInserted-event and compare the elements id.

Notice: This event is marked as Depricated and will probably stop working in modern modern browsers at some point in the near future.

let container = document.getElementById('container');
let button = document.getElementById('button');

document.body.addEventListener('DOMNodeInserted', function(event) {
  if (event.originalTarget.id == button.id) {
    console.log('Parent changed to: ' + event.originalTarget.parentElement.id);
  }
});

button.addEventListener('click', function(event) {
  container.appendChild(button);
});
#container {
  width: 140px;
  height: 24px;
  margin: 10px;
  border: 2px dashed #c0a;
}
<div id="container"></div>
<button id="button">append to container</button>

Upvotes: 1

Related Questions