<div class="container">
<div>
<div class="button addBtn">Add Child Node</div>
<div class="button removeBtn">Remove Child Node</div>
<div class="button changeAttrBtn">Change Attribute Value</div>
</div>
<div class="parent" data-count="0">
<div class="child"> Child </div>
</div>
<div class="infoBoard">
</div>
</div>
.container {
margin: 10px;
}
.button {
background: purple;
color: white;
cursor: pointer;
display: inline-block;
font-size: 20px;
padding: 1.75rem 1rem;
text-align: center;
text-decoration: none;
font-weight: bold;
margin: 5px;
}
.button:hover {
background: #AD1457;
}
.parent {
border: 1px solid #ccc;
padding: 10px;
}
.child {
background: #673AB7;
color: #fff;
padding: 10px;
margin-top: 5px;
}
.infoBoard {
padding: 10px;
border: 1px solid #ccc;
font-size: 20px;
padding: 1.75rem 1rem;
background: #f4f4f4;
}
if(!("MutationObserver" in window)) {
document.body.innerText = "Not supported by your browser";
}
/* Create mutation observer */
const config = {
childList: true,
attributes: true,
characterData: true
};
const observer = new MutationObserver(handler);
/* Observe target */
const parent = document.querySelector(".parent");
observer.observe(parent, config);
/* Callback function when mutation happens */
function handler(mutationRecords, observer) {
console.log("Handle mutation");
mutationRecords.forEach((mutationRecord) => {
const info = document.querySelector(".infoBoard");
switch(mutationRecord.type) {
case "childList":
info.innerText = "Mutation Observer handler: Child node added or removed";
break;
case "attributes":
info.innerText = `Mutation Observer handler: Parent attribute modified: ${mutationRecord.attributeName} : ${mutationRecord.target.children.length}`;
break;
default:
info.innerText = "";
}
});
}
/* Add child nodes when clicked on add child node button */
document.querySelector(".addBtn").addEventListener("click", () => {
console.log("Add child");
const child = document.createElement("div");
child.className = "child";
child.innerText = "Child ";
parent.appendChild(child);
});
/* Remove child nodes when clicked on remove child node button */
document.querySelector(".removeBtn").addEventListener("click", () => {
console.log("Remove child");
const child = parent.firstChild;
parent.removeChild(child);
});
/* Change attribute value when clicked on change attribute button */
document.querySelector(".changeAttrBtn").addEventListener("click", () => {
console.log("Change attribute value");
parent.setAttribute("data-count", parent.childNodes.length);
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.