The MutationRecord
read-only property addedNodes
is a NodeList
of nodes added to a target node by a mutation observed with a MutationObserver
.
The MutationRecord
read-only property addedNodes
is a NodeList
of nodes added to a target node by a mutation observed with a MutationObserver
.
A NodeList
containing the nodes added to the target of the mutation observed by the MutationObserver
.
In the following example, there are two buttons: one to add new nodes to a target node, and one to remove them. A MutationObserver
is used to observe the target node for changes; when a change is detected, the observer calls a function, logNewNodes()
.
The logNewNodes()
function checks that the MutationRecord's type
is childList
, which means that the target node's children have changed. If the type is childlist
the function updates the total number of new nodes that have been added. However, note that clicking the "Remove a node" button will not increment the total number of new nodes, because in this case record.addedNodes
will have a length of 0
.
html
<button id="add-nodes">Add a node</button> <button id="remove-nodes">Remove a node</button> <button id="reset">Reset</button> <pre id="counter">Total added nodes: 0</pre> <div id="target"></div>
js
const addNodes = document.querySelector("#add-nodes"); const removeNodes = document.querySelector("#remove-nodes"); const reset = document.querySelector("#reset"); const counter = document.querySelector("#counter"); const target = document.querySelector("#target"); let totalAddedNodes = 0; addNodes.addEventListener("click", () => { const newPara = document.createElement("p"); newPara.textContent = `Current time: ${Date.now()}`; target.appendChild(newPara); }); removeNodes.addEventListener("click", () => { const lastChild = target.lastChild; if (lastChild) { target.removeChild(lastChild); } }); reset.addEventListener("click", () => self.location.reload()); function logNewNodes(records) { for (const record of records) { // Check if the childlist of the target node has been mutated if (record.type === "childList") { totalAddedNodes = totalAddedNodes + record.addedNodes.length; // Log the number of nodes added counter.textContent = `Total added nodes: ${totalAddedNodes}`; } } } const observer = new MutationObserver(logNewNodes); observer.observe(target, { childList: true });
Specification |
---|
DOM Standard # ref-for-dom-mutationrecord-addednodes② |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
addedNodes |
16 | 12 | 14 | 11 | 15 | 7 | 4.4 | 18 | 14 | 14 | 7 | 1.0 |
© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord/addedNodes