jQuery Event Detect changes to the html text of a div

Question

I have a div which has its content changing all the time   be it ajax requests  jquery functions  blur etc etc   Is there a way I can detect any changes on my div at any point in time    I dont want to use any intervals or default value checked   Something like this would do      mydiv   contentchanged      alert  changed

User · Answer

Adding some content to a div  whether through jQuery or via de DOM-API directly  defaults to the  appendChild   function  What you can do is to override the  appendChild   function of the current object and implement an observer in it  Now having overridden our  appendChild   function  we need to borrow that function from an other object to be able to append the content  Therefor we call the  appendChild   of an other div to finally append the content  Ofcourse  this counts also for the  removeChild    var obj   document getElementById  quot mydiv quot        obj appendChild   function node            alert  quot changed  quot                call the  appendChild   function of some other div            and pass the current  this  to let the function affect it          document createElement  quot div quot   appendChild call this  node                     Here you can find a na  f example  You can extend it by yourself I guess  http   jsfiddle net RKLmA 31  By the way  this shows JavaScript complies the OpenClosed priciple

User · Answer

DOMSubtreeModified is not a good solution  It s can cause infinite loops if you decide to change the DOM inside the event handler  hence it has been disabled in a number of browsers  MutationObserver will be the answer  MDN Doc const onChangeElement    qSelector  cb   gt    const targetNode   document querySelector qSelector    if targetNode       const config     attributes  true  childList  false  subtree  false        const callback   function mutationsList  observer            cb   qSelector              const observer   new MutationObserver callback       observer observe targetNode  config     else       console error  quot onChangeElement  Invalid Selector quot         And you can use it  onChangeElement  mydiv   function jqueryElement      alert  changed

User · Answer

Tried some of answers given above but those fires event twice  Here is working solution if you may need the same     mydiv   one  DOMSubtreeModified   function        console log  changed

User · Answer

Since     selector   bind   is deprecated  you should use      body   on  DOMSubtreeModified     selector   function            code here

User · Answer

Use MutationObserver as seen in this snippet provided by Mozilla  and adapted from this blog post  Alternatively  you can use the JQuery example seen in this link  Chrome 18   Firefox 14   IE 11   Safari 6      Select the node that will be observed for mutations var targetNode   document getElementById  some-id        Options for the observer  which mutations to observe  var config     attributes  true  childList  true        Callback function to execute when mutations are observed var callback   function mutationsList        for var mutation of mutationsList            if  mutation type     childList                 console log  A child node has been added or removed                       else if  mutation type     attributes                 console log  The     mutation attributeName     attribute was modified                            Create an observer instance linked to the callback function var observer   new MutationObserver callback       Start observing the target node for configured mutations observer observe targetNode  config       Later  you can stop observing observer disconnect

User · Answer

You can store the old innerHTML of the div in a variable  Set an interval to check if the old content matches the current content  When this isn t true do something

User · Answer

If you don t want use timer and check innerHTML you can try this event     mydiv   bind  DOMSubtreeModified   function      console log  changed          More details and browser support datas are Here   Attention  in newer jQuery versions bind   is deprecated  so you should use on   instead      body   on  DOMSubtreeModified    mydiv   function      console log  changed

User · Answer

Using Javascript MutationObserver     More Details https   developer mozilla org en-US docs Web API MutationObserver     select the target node var target   document querySelector  mydiv      create an observer instance var observer   new MutationObserver function mutations      console log target innerText             configuration of the observer  var config     attributes  true  childList  true  characterData  true       pass in the target node  as well as the observer options observer observe target  config

User · Answer

There is no inbuilt solution to this problem  this is a problem with your design and coding pattern   You can use publisher subscriber pattern  For this you can use jQuery custom events or your own event mechanism    First    function changeHtml selector  html        var elem     selector       jQuery event trigger  htmlchanging     elements  elem  content    current  elem html    pending  html          elem html html       jQuery event trigger  htmlchanged     elements  elem  content  html         Now you can subscribe divhtmlchanging divhtmlchanged events as follow     document  bind  htmlchanging   function  e  data          your before changing html  logic goes here        document  bind  htmlchanged   function  e  data          your after changed html  logic goes here       Now  you have to change your div content changes through this changeHtml   function  So  you can monitor or can do necessary changes accordingly because bind callback data argument containing the information    You have to change your div s html like this   changeHtml   mydiv     lt p gt test content lt  p gt       And also  you can use this for any html element s  except input element  Anyway you can modify this to use with any element s

User · Answer

Following code works for me         body   on  DOMSubtreeModified    mydiv   function         alert  changed          Hope it will help someone

User · Answer

Try the MutationObserver    https   developer microsoft com en-us microsoft-edge platform documentation dev-guide dom mutation-observers  https   developer mozilla org en-US docs Web API MutationObserver    browser support  http   caniuse com  feat mutationobserver    x000D   x000D   lt html gt  x000D     lt  -- example from Microsoft https   developer microsoft com en-us microsoft-edge platform documentation dev-guide dom mutation-observers  -- gt  x000D   x000D     lt head gt  x000D       lt  head gt  x000D     lt body gt  x000D       lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D       lt script type  text javascript  gt  x000D           Inspect the array of MutationRecord objects to identify the nature of the change x000D  function mutationObjectCallback mutationRecordsList    x000D    console log  mutationObjectCallback invoked     x000D   x000D    mutationRecordsList forEach function mutationRecord    x000D      console log  Type of mutation      mutationRecord type   x000D      if   attributes      mutationRecord type    x000D        console log  Old attribute value      mutationRecord oldValue   x000D        x000D        x000D    x000D         x000D     Create an observer object and assign a callback function x000D  var observerObject   new MutationObserver mutationObjectCallback   x000D   x000D           the target to watch  this could be  yourUniqueDiv  x000D           we use the body to watch for changes x000D  var targetObject   document body   x000D         x000D     Register the target node to observe and specify which DOM changes to watch x000D         x000D         x000D  observerObject observe targetObject     x000D    attributes  true  x000D    attributeFilter    id    dir    x000D    attributeOldValue  true  x000D    childList  true x000D      x000D   x000D     This will invoke the mutationObjectCallback function  but only after all script in this x000D     scope has run   For now  it simply queues a MutationRecord object with the change information x000D  targetObject appendChild document createElement  div     x000D   x000D     Now a second MutationRecord object will be added  this time for an attribute change x000D  targetObject dir    rtl   x000D   x000D   x000D         lt  script gt  x000D       lt  body gt  x000D     lt  html gt  x000D   x000D   x000D

User · Answer

You are looking for MutationObserver or Mutation Events  Neither are supported everywhere nor are looked upon too fondly by the developer world   If you know  and can make sure that  the div s size will change  you may be able to use the crossbrowser resize event

User · Answer

You can try this      myDiv   bind  DOMNodeInserted DOMNodeRemoved   function            but this might not work in internet explorer  haven t tested it

[jquery] jQuery Event : Detect changes to the html/text of a div

Examples related to jquery

Examples related to jquery-ui