Chrome's developer tools provides the option to break the javascript code execution when an element's attributes or DOM tree are modified. (Inspect an element > right-click on the element tag > "Break on…")
However, I would like to jump into the code when the innerHTML of an element is changed by JavaScript. Activating all the "break on" options won't do it, so I'd like to know if there is some way to do it.
For that reason, it is recommended that instead of innerHTML you use: Element.SetHTML() to sanitize the text before it is inserted into the DOM.
People can struggle and complain about innerHTML not working. Such things usually occur because of human error, when strings are not appropriately defined, or there are some mistakes in JavaScript code.
Setting the innerHTML property of an element To set the value of innerHTML property, you use this syntax: element. innerHTML = newHTML; The setting will replace the existing content of an element with the new content.
So, You should check two. node removal and subtree modifications.
Also, you can use MutationObserver API directly.
Old events (DOMSubtreeModified
, DOMCharacterDataModified
, ...) are deprecated. mdn, google
I would suggest trying DOMSubtreeModified Event .
$("#elem").on("DOMCharacterDataModified", function(){
alert("Modified");
});
Fiddle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With