I used the div with id = discussion_subentries. In my testing, all of the entries were posted at the same time, so it wasn't even necessary to check what was in the mutations, just that it happened.
Here's the relevant portion of my code
var subentries = document.getElementById('discussion_subentries');
if (subentries) {
var observer = new MutationObserver(function() {
observer.disconnect();
});
observer.observe(subentries, { 'childList' : true });
}
I have gotten bitten if I try to disconnect before I've done my stuff, but if you want to future-proof, you could not disconnect and keep listening for changes.
The childList part just looks for adding/removing nodes, not changing attributes (like showing or hiding) on existing elements. I did not include subtree because it was an immediate child of div#discussion_subentries. In general, you want to find the nearest parent that is there in the initial page load (Ctrl-U to view source, not the DOM inspector). If it's not an immediate parent, you need to include the subtree.
You can also attach event listeners in a similar way. I didn't show it above, but I added an event listener to the subentries element instead of to every single discussion thread. When I was talking to an Instructure engineer after Project Khaki, he told me there wasn't a problem with doing it to each element, but the current JavaScript recommendation is to put one at the top and then look at the target to see where they clicked. I was also able to do that before the MutationObserver since I wasn't attaching them to the threads.
Another note that isn't illustrated in my code above -- there is a chance that your element might already exist, so you should check for it before you load the mutation observer. If it's something that gets loaded through pagination (like the People course roster page), then you need to run your code on what is there but also look for additional information to come in (don't use the disconnect).
That may need to change for what you need, but that's what I used for my current discussion project.
If you need to look at the mutation events to look for something specific, then pass mutations as a parameter to the anonymous function inside the observer. Then do a mutations.forEach)function(mutation){}); to iterate over them.
If you want to look at what I've done with MutationObservers with Canvas, you can look at my Canvancement GitHub repository and search for MutationObserver. I can't guarantee that they're all done right (I may not have checked for the existence before loading the observer).
The specific code I'm talking about here is still in development and not on GitHub yet.
One other note I saw as I paged through this -- my understanding is that the document ready is no longer recommended. As of jQuery 3.0, it's been deprecated, but still works. I know Canvas isn't using that new of a version of jQuery, but it is loading the scripts at the bottom of the HTML page and so the DOM should be ready before it gets executed. Enclosing your code inside a function to not pollute the global variable space is a good idea, so I use an iife. But as you discovered here, the DOM is ready to be used before the discussion item is added to the DOM. That's where the mutation observer comes in. Waiting for the document to have loaded, which means waiting for all of the images and scripts to load as well, doesn't always work (and sometimes needlessly slows things down) because the Canvas JavaScript has loaded, but then makes additional AJAX calls that aren't picked up by that.
I imagine many JavaScript programmers use document ready and timers because that's what they've always done. Those people are probably much more skilled than I am as I haven't been programming in JavaScript for very long (couple of years) and taught myself by researching how to do things (spending a lot of time on StackOverflow and then finding the right way to do it from Mozilla Developer Network). But one of the side benefits is that I don't have old JavaScript habits (just those from all the other programming languages I've used that influence how I write JS).
