search

Javascript listen for innerhtml change

Ngày đăng: 05/10/2022
Trả lời: 0
Lượt xem: 139

I need to intercept any changes in the content of a cell inside my webpage.

Show

The following code shows me that addEventListener does not work.

function modifyText() {
alert("!");
}

var el=document.getElementById("mycell");
el.innerHTML="a"
el.addEventListener("change", modifyText, false); 
// After next instruction I expect an alert message but it does not appear...
el.innerHTML="Z";

The code is just a toy example. In my real case the changes in the page (and therefore in the cell, too) are made by a webapp that I have NO control over.

asked Sep 11, 2011 at 21:14

2

There is a modern way to catch innerhtml changes:

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe

Example:

// identify an element to observe
elementToObserve = window.document.getElementById('y-range').children[0];

// create a new instance of 'MutationObserver' named 'observer', 
// passing it a callback function
observer = new MutationObserver(function(mutationsList, observer) {
    console.log(mutationsList);
});

// call 'observe' on that MutationObserver instance, 
// passing it the element to observe, and the options object
observer.observe(elementToObserve, {characterData: false, childList: true, attributes: false});

childList mutation fires on innerHTML change.

answered May 18, 2020 at 9:20

legalelegale

4524 silver badges8 bronze badges

1

You can't listen to a DOM element change that way. change event is mostly for inputs

There is some other new DOM 3 events that would help you on this.

Here is some:

DOMCharacterDataModified //Draft

DOMSubtreeModified

answered Sep 11, 2011 at 21:22

MohsenMohsen

62.7k33 gold badges155 silver badges181 bronze badges

1

Does this Most efficient method of detecting/monitoring DOM changes? help?

It seems like there aren't any 100% cross browser solutions, and one of the workarounds is to poll the elements of interest to see if their innerHTML.length changes!

answered Sep 11, 2011 at 21:22

Paul GrimePaul Grime

14.9k4 gold badges34 silver badges57 bronze badges

The Element property innerHTML gets or sets the HTML or XML markup contained within the element.

To insert the HTML into the document rather than replace the contents of an element, use the method insertAdjacentHTML().

Value

A string containing the HTML serialization of the element's descendants. Setting the value of innerHTML removes all of the element's descendants and replaces them with nodes constructed by parsing the HTML given in the string htmlString.

Exceptions

SyntaxError DOMException

Thrown if an attempt was made to set the value of innerHTML using a string which is not properly-formed HTML.

NoModificationAllowedError DOMException

Thrown if an attempt was made to insert the HTML into a node whose parent is a Document.

Usage notes

The innerHTML property can be used to examine the current HTML source of the page, including any changes that have been made since the page was initially loaded.

Reading the HTML contents of an element

Reading innerHTML causes the user agent to serialize the HTML or XML fragment comprised of the element's descendants. The resulting string is returned.

let contents = myElement.innerHTML;

This lets you look at the HTML markup of the element's content nodes.

Note: The returned HTML or XML fragment is generated based on the current contents of the element, so the markup and formatting of the returned fragment is likely not to match the original page markup.

Replacing the contents of an element

Setting the value of innerHTML lets you easily replace the existing contents of an element with new content.

Note: This is a security risk if the string to be inserted might contain potentially malicious content. When inserting user-supplied data you should always consider using Element.SetHTML() instead, in order to sanitize the content before it is inserted.

For example, you can erase the entire contents of a document by clearing the contents of the document's body attribute:

document.body.innerHTML = "";

This example fetches the document's current HTML markup and replaces the "<" characters with the HTML entity "<", thereby essentially converting the HTML into raw text. This is then wrapped in a 

 element. Then the value of innerHTML is changed to this new string. As a result, the document contents are replaced with a display of the page's entire source code. 
document.documentElement.innerHTML = `
${document.documentElement.innerHTML.replace(/</g,"<")}
`;

Operational details
 What exactly happens when you set value of innerHTML? Doing so causes the user agent to follow these steps: 
  1.  The specified value is parsed as
HTML or XML (based on the document type), resulting in a DocumentFragment object representing the new set of DOM nodes for the new elements. 
  2.  If the element whose contents are being replaced is a