Determine when html tag content changes

Question

Is there a way to determine when the contents of an HTML tag have changed? I would rather catch an event rather than interrogate it.

My use case: I have text enclosed in span tags in a text editor, and I need to remove the span tags when the custom text is changed.

Answer 1

Do you use one of the typical WYSIWYG editors and do not want to update your code to interrupt the update? Then perhaps you could listen to the onTextChange event (or something similar) that the WYSIWYG editor sends, check the contents of the change, and respond to it.

Just an idea, given that you give too little information in your question.

Answer 2

I don’t think there is an event available (other than input elements), however you can poll it.

$element = $('#my-element'); var originalHtml = $element.html(); var pollHtml = setInterval(function() { if (originalHtml !== $element.html()) { alert('HTML changed!'); clearInterval(pollHtml); }; }, 100); 

Answer 3

I can’t add a comment, so I offer my suggestion here,

@ Justin Johnson

 $("#close-question-2114317").change(function() {alert(1);}); $("#close-question-2114317").text( function(){ $(this).trigger('change'); return "Close!!!"; }); 

I believe that we can trigger a trigger if this is the case ...

Answer 4

You must use JavaScript to somehow modify the DOM. Surveying in most cases is a bad idea. I created a demo here , in which you will be asked to check how you can check the HTML for changes. Just call this feature if necessary ... even if it's just a survey.