StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>If I understand your problem correctly, then a solution could be;</p> <p>To watch for changes to the <a href="https://developer.mozilla.org/en/docs/DOM/window.setInterval" rel="nofollow">DOM</a> you can use <a href="https://developer.mozilla.org/en-US/docs/DOM/MutationObserver" rel="nofollow">mutation events</a> (deprecated) or the new <a href="http://en.wikipedia.org/wiki/HTML5" rel="nofollow">HTML5</a> <a href="https://developer.mozilla.org/en-US/docs/DOM/MutationObserver" rel="nofollow">MutationObserver</a></p> <p>Here is an example on <a href="http://jsfiddle.net/Xotic750/6GbHF/" rel="nofollow">jsfiddle</a> that demonstrates how these are used.</p> <p>Both methods are not being used at the same time, the script checks to see if the new method, MutationObserver, is supported and then uses that, else it falls back to the deprecated mutation event. </p> <p>What this script does is watches for changes to the <code>ul</code> with the id of <code>watch</code>. When it sees a change then it logs the information to the console using <a href="https://developer.mozilla.org/en/docs/DOM/console.log" rel="nofollow">console.log</a></p> <p>Using these priciples, you should be able to apply them to your situation, and watch for added elements and react to them accordingly.</p> <p>HTML</p> <pre><code><button id="button">Click me</button> <ul id="watch"></span> </code></pre> <p>Javascript</p> <pre><code>/*jslint sub: true, maxerr: 50, indent: 4, browser: true */ /* global global */ (function (global) { "use strict"; if (typeof global.MutationObserver !== "function") { global.MutationObserver = global.WebKitMutationObserver || global.MozMutationObserver; } var watch = document.getElementById("watch"); function whenClicked() { var li = document.createElement("li"); li.textContent = "List element"; watch.appendChild(li); } document.getElementById("button").addEventListener("click", whenClicked, false); if (typeof global.MutationObserver !== "function") { watch.addEventListener("DOMNodeInserted", function (evt) { console.log("New element detected", evt.target); }, false); } else { var observer = new global.MutationObserver(function (mutations) { mutations.forEach(function (mutation) { if (mutation.type === 'childList') { console.log("New element detected", mutation.addedNodes[0]); } }); }); observer.observe(watch, { childList: true, characterData: true, subtree: true }); } }(window)); </code></pre> <p>The whole thing is then wrapped in an anonymous <a href="https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Closures" rel="nofollow">closure</a> which is executed immediately, and into which we pass the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window" rel="nofollow">window object</a> which we then reference as the variable named <code>global</code>.</p> <p>Finally, the first two lines are comments, but not any old comments, they are instructions that are used by <a href="http://www.jslint.com/" rel="nofollow">jslint</a>; a static code analysis tool used in javascript software development for checking if JavaScript source code complies with <a href="http://javascript.crockford.com/code.html" rel="nofollow">coding conventions</a> set out by Douglas Crockford.</p> <p>You can find further examples at;</p> <p>html5rocks - <a href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" rel="nofollow">Detect DOM changes with Mutation Observers</a><br/> hacks.mozilla.org - <a href="https://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/" rel="nofollow">DOM MutationObserver – reacting to DOM changes without killing browser performance.</a></p> <p>A G* search should bring you more results.</p> <p>If I didn't understand your problem exactly, then at least I hope that this made for an interesting read.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload