title: Detect all changes in a div jquery
body: <p>I am working on a <a href="http://jqueryte.com/" rel="nofollow noreferrer">jQuery Editor</a>. I want to capture all changes made in div.<br>
  I went through some of stack overflow questions like <a href="https://stackoverflow.com/questions/2712124/jquery-listen-to-changes-within-a-div-and-act-accordingly">jquery-listen-to-changes-within-a-div-and-act-accordingly</a>, <a href="https://stackoverflow.com/questions/4979738/fire-jquery-event-on-div-change">fire-jquery-event-on-div-change</a><br>
  These questions were used to get information when a change happens, but i need to know details about what are all changes made within a div like any text added or removed and at what position etc.<br>
  The position and value is needed so that i can use it for my algorithm</p>
  
  <pre><code>var editorText = $(".jqte_editor").html();
  //editorText = "This is a simple editor"
  //Convert text into array
  var array = editorText.match(/.{1,5}/g);
  
  var newText = "is not";
  var position = 2;
  
  //Add new text and again split it if size is more than 5
  if(newText.length &gt; 5)
  {
      var newArray = abc.match(/.{1,5}/g);
  
      for(var i=0;i&lt;newArray.length;i++)
      {
              array.splice(position+i, 0, newArray[i]);
      }
  
      array.splice(pos-1, 1);
  }   
  
  console.log("Array after rendering"+array);
  </code></pre>
  
  <p>So here if i  can get newText and position, i can update array easily.</p>