Scribd
Upload
17 views3 pages

Botines y Botas

This document provides an example of using MutationObserver to detect changes to the innerHTML of a DOM element. It demonstrates creating a MutationObserver on a <div> element, configuring it to watch for childList, subtree, and characterData changes, and logging the updated innerHTML when changes are detected. A content change is simulated after 2 seconds using setTimeout to demonstrate the listener triggering accordingly.

Uploaded by

yudith perez
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views3 pages

Botines y Botas

This document provides an example of using MutationObserver to detect changes to the innerHTML of a DOM element. It demonstrates creating a MutationObserver on a <div> element, configuring it to watch for childList, subtree, and characterData changes, and logging the updated innerHTML when changes are detected. A content change is simulated after 2 seconds using setTimeout to demonstrate the listener triggering accordingly.

Uploaded by

yudith perez
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Esta es la librería externa que inserta el html dentro del div id= effec�veAppsLowInStockAlert

Este es un ejemplo de como hacer in listener a ese div y cada que cambie hacer algo, como revisar lo que tenga dentro y
volverlo a cambiar.
You can create a listener in JavaScript to detect when the content or `innerHTML` of a specific `<div>` element with the
ID "effec�veAppsLowInStockAlert" changes. Here's an example:

HTML:
<div id="effec�veAppsLowInStockAlert">

Ini�al content

</div>

JavaScript:
// Get the target element

const targetElement = document.getElementById('effec�veAppsLowInStockAlert');

// Create a Muta�onObserver to listen for changes

const observer = new Muta�onObserver(func�on(muta�ons) {

muta�ons.forEach(func�on(muta�on) {

if (muta�on.type === 'childList' || muta�on.type === 'characterData') {

// Content or innerHTML has changed

console.log('Content changed:', targetElement.innerHTML);

// Perform addi�onal ac�ons as needed

});

});

// Configure and start observing changes

const config = { childList: true, subtree: true, characterData: true };

observer.observe(targetElement, config);

// Simulate a content change a�er 2 seconds (for demonstra�on)

setTimeout(func�on() {

targetElement.innerHTML = 'New content';

}, 2000);

In this example, we use the `Muta�onObserver` API to observe changes in the target `<div>` element. The
`Muta�onObserver` callback func�on is triggered when there are changes in the child nodes or character data of the
observed element.

We configure the `Muta�onObserver` to watch for changes to `childList` (child nodes), `subtree` (nested elements), and
`characterData` (character content like `innerHTML`). When a change is detected, the callback func�on is executed, and
we log the updated content of the target element.
In the example, we simulate a content change a�er 2 seconds using `setTimeout()` for demonstra�on purposes. You can
modify the content of the target element programma�cally, and the listener will trigger accordingly.

You might also like