Develop Reference

Executing external JS using innerHTML and appendChild

I've been playing around with the Material Design Lite library that Google just launched a few days ago, but have some questions, specifically on how to initiate (or execute?) external JS when the HTML changes using innerHTML and appendChild.
See the first example here. As you can see, the HTML for the menu is already within the HTML file when it is first loaded so the menu works fine.
But in this example, the HTML of the document is modified using JS. However, the menu does not work anymore because the script is not executing, I think.
How can I resolve this issue? What's a better way to achieve this result? I'm a newbie when it comes to JavaScript.

You will need to attach the proper event listener from the library. With this change (adding componentHandler.upgradeAllRegistered(); after appending the item) it should work:
document.body.appendChild(menu);
componentHandler.upgradeAllRegistered();

When the menu button is inserted dynamically (when the user clicks), it doesn't get assigned the event listeners to show the menu. I'm guessing that the material design library parses the HTML when it (the library) gets loaded (since you're loading it at the bottom of your HTML document). Since it's already loaded by the time the user clicks, it doesn't check the new element that has been inserted and can't assign it the event listeners.
If this is the case, you'll need to find a way to get the library to recognize your new button.

Javascript DOM-event origin and dependencies

Imagine that there's a button on one web page (not mine) and when it's clicked it performs some
Javascript. I want to have a button on my web page that performs exactly the same. So I need to
attach all necessary js files (but first I have to find them) to my html page and sometimes add some js to my html page.
What I usually do in this case? I inspect this button html element to see if there's onclick attribute for this button. If it is, I see the function called when button is clicked and then I try to search for this function in current html page and all js files attached to page. Also I need to find all dependencies (like jQuery, fancybox etc.).
If the button doesn't have onclick attribute I have to look for direct getElementById or jQuery selector pointing to this button with rest of code there. Sometimes there's no such a selector and I have to find a nested selector - really hard and annoying thing.
Is there any better, automated way for doing things above. Ideally after selecting the element in DOM (button in this case) and pressing some magic button I will be able to see all js files involved in processing this click and also js code in html page.

It's going to involve digging no matter what you do. But Chrome's Dev Tools can help with the attached event handlers, to an extent. When you right-click an element and inspect it, on the right-hand side there's a panel showing various tabs: [Styles] [Computed] [Event Listeners] [DOM Breakpoints] [Properties]. The [Event Listeners] one shows the listeners directly attached to that element. Of course, on a site using jQuery (which is more than half the sites using JavaScript at all), looking at the handler will dump you into the jQuery event handling code, but it's a start.
Just as a side point: While it's fine to look at the source of pages for inspiration, or to see how they solved a particular problem, or what plugins they're using to get an effect, etc., I assume you're not grabbing large sections of their actual code (as opposed to libraries and plugins with liberal licenses) without their permission, which is probably not cool.

Dynamically loaded Tree Menu using JS or jQuery

I have an Accordian menu for navigating thru an external API (folder structure)
I am attempting to recreate the folder structure dynamically, as the user navigates.
The problem I am having currently, is that: as folders and subfolders are loaded, they lose (or never receive) the inbuilt jqueryui click handling (for un/folding)
I wish to save myself having to write my own accordian click handlers
but sadly, the structure of the (often nested) accordians is dynamically loaded and doesn't get any handlers assigned to it.

After browsing SO and randomly clicking on unrelated 'similar questions' I was able to find a most excellent solution - http://www.jstree.com/
this neat little jQuery plugin addresses every requirement I had for my folders navigation menu, and more!
Allow me to post their front page blurb:
jsTree is jquery plugin, that provides interactive trees. It is absolutely free, open source and distributed under the MIT license. jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources and AJAX loading.
jsTree functions properly in either box-model (content-box or border-box), can be loaded as an AMD module, and has a built in mobile theme for responsive design, that can easily be customized. It uses jQuery's event system, so binding callbacks on various events in the tree is familiar and easy.
Just a few of the features worth noting:
drag & drop support
keyboard navigation
inline edit, create and delete
tri-state checkboxes
fuzzy searching
customizable node types
All modern browsers are supported, as well as IE8

Angular UI elements: do I still need jQuery?

I'm just starting out in Angular, and I get the MVC model for organizing data architecturally, but I'm not sure about building custom UI elements without using jQuery (or vanilla js).
For example, I want to build a custom slider, sort of like a progress bar that a user can click (or touch) and drag to change the value. Is angular built for that, or would it require a hack-y solution? Would it be some combination of mouseover, mousedown, mousemove, mouseup events?

AngularJS has its own lite version of jQuery. The document is here: http://docs.angularjs.org/api/angular.element
It is not supposed to handle heavy DOM manipulation and it will not support such thing in the future. If you want to build a custom slider, there is a plug-in called angular-ui: http://angular-ui.github.io/
However, Angular-ui uses jQuery as well. I also notice they don't have a built-in slider component, so my suggestion is that first you should use angular.element, if this cannot satisfy whatever you need, use jQuery.

Valum's Ajax file uploader - bind to all elements of a given class

I'm trying to use Valum's file upload script ( http://valums.com/ajax-upload/ ) to allow the creation of links that allow file uploads.
I'm using the jQuery library.
It's simple to get one link on a page to work using the standard documentation, but now I want to be able to catch all links of a given class rather than statically assigning to a given element.
Futhermore my site uses Ajax pageloads so I need to be able to somehow assign the uploader to new Ajax loaded content.
The envisaged use is to allow creating a link like this in an Ajax loaded page and have it trigger the uploader:
Upload a file
My first thought is to use the jQuery live() method to try bind the class, but I can't find a suitable event to trigger on.
Has anybody had experience with this sort of issue?

No, it's not so easy with <input type="file">, unfortunately. Because of some security issues, IE (even IE9!) just doesn't let you sumbit the form with this element "fiddled" - when 'click', 'change' or any other event is raised on it artificially.
So this plugin works different. Instead of creating an event handler that 'reroutes' user clicks to some fileinput element created on the fly, the wrapper structure is created around the link given as its target - and fileinput is inserted right there, being hidden enough for a user to not see it - but enough for a browser to register clicks on it (check this method in the source code and this article for details).
The bottom line is, you can't use event handling delegation here: the only sensible way is wrapping the newly-created elements with that plugin as well.