Listener of adding specific node in DOM

Question

is there any way I can be notified when particular node gets added in DOM?

I have a function that applies on all input text fields. When DOM get loaded, i use getElementByTagName() and then filter with type attributes of only text and I apply that function to all of them.

But the problem is that, when somebody adds new node, I must be notified to apply that function to newly added field.

I want something like jQuery live() function, but in javascript.

Is there any particular listener that I can listen to and get notified when input tag gets added?

Answer 1

You can use the DOMNodeInserted mutation event for this.

Docs: https://developer.mozilla.org/en-US/docs/DOM/Mutation_events

Answer 2

The DOMInserted Mutation Event is currently deprecated because of it's performance issue. Hence, Please use the Mutation Observer. I did the DOM changes listener that handles the DOM added, removed, inserted, attribute and data changes in one of my project using Mutation Observer and it worked great! For your further implementation, these links will help you:

1. http://gabrieleromanato.name/jquery-detecting-new-elements-with-the-mutationobserver-object/
2. https://github.com/kapetan/jquery-observe
3. Is there a JavaScript/jQuery DOM change listener?