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.

Is it more efficient to keep DOM elements on the page or to re-render them as needed?

I have a dialog box that has settings associated with it. When the user clicks the "settings" button, a form is displayed so they can modify them.
What is more efficient:
to have the settings div exist hidden on the page and display when needed
OR
to create the settings div and populate it with data when needed?
In the first scenario you don't need to create the DOM elements and populate them every time, but if there are many dialog boxes open at once (a common situation) then the amount of elements on the page is pretty large and many of them are not going to be used often. But in the second situation, elements are created and appended to the DOM which gets expensive.

I'd suggest you to "cache" your html on the page, but enforce browser to do not render it until necessary (until user request the data, or simply scroll to it). The main idea is to add your html (with data) to the page, but comment it out. For example,
<div id="cached-html">
<!--
<div>
...some custom html here
</div>
-->
</div>
Then once user requested the html, you can do the following:
var html = document.getElementById('cached-html'),
inner = html.innerHTML;
html.innerHTML = inner.substring(4, inner.length - 4);
Pros. is that you don't bother your browser with initial rendering (later you can simply user display:none to hide it again), so your page renders faster.
And another note - if your data (and as a consequence inner html) changes frequently, then it will be better to re-render it each time user request it, but if it is almost static, then hide/show should be more effective.

There can be problems either way, it depends on your page. If you already have a lot of elements on the page, it may be better load add them when you need them. If your page is already very "scripty" you may want to load the elements and show them when needed.
The real question is what would be better for your page, more script, or more dom elements.

When you have to display same setting div at multiple places.
Keeping that hidden is a better solution.
Remember that creating a new dom element or cloning a existing dom element gives almost same performance, but for code clarity/maintainence cloning or template is better.
Implementation using template: Make a template of div setting and keep that hidden:
<div class="template_setting">
Your settings(children of template_setting)
</div>
Javascript/Jquery code:
-Whenever someone opens a dialogue box, make a clone of childrens of template_setting and append to div_dialogue.
-As you may have multiple templates on the same page( which is not always true).
Apply a custom event on the id of newly created setting div.( keep id of each setting div different, you can increment each one by some character/number).
$('#dialogue_opener').click(function(event){
$('.template_setting').children().clone().appendTo(div_dialogue)
.trigger('adjustSettingID');

Consider a hybrid solution. Load the "settings" div after the page is ready. This way, the user won't feel the extra "expense", and you'll have the div ready for when you need it.

I've typically seen that rendering from JavaScript is pretty darn fast. I've built lots of "just in time" menus, grids, and forms and the users can't tell the difference. The nice thing about it is that you don't have to keep a form current, just blow it away and default everything to the data in you settings object. Makes for cleaner code in my opinion.

How do I dynamically add a div element to any page from a Firefox extension/Addon

I am writing an extension for firefox which will be used to annotate pages on the web via a service. I would like to have a div or an overlay element (probably XUL based) at the bottom of the page which will let people annotate a page and save it. Something like what the Google Friend Connect does on this page, but via an addon.
This floating div/overlay should show up for every page on FF and should render contents from a web service. How do I start building this out?
If it is possible to access DOM via a FF plugin and alter it, then I would like to be able to add a floating div to the body of the document. But that doesn't work either. Example posted here: Dynamically adding a floating div to a page

There are several things you have to do:
You probably want to add some custom CSS to style the div. You can use the stylesheet service.
You have to attach an event handler to the load event ( or DOMContentLoaded), to be notified when a page finished loading. Have a look at Intercepting Page Loads and On page load.
You need a reference to element you want the new element append to. Tabbed Browser provides some useful information. E.g. you can get a reference to the body of the current selected tab gBrowser.contentDocument.body.
Regarding your code example: You forgot the give the element the CSS property position: absolute; or position: fixed; (you have a typo in your code, you wrote postion), depending on whether it should appear at the bottom of the page or the screen.

You can do this (because I have). To do it you'll need to find the node you want to change the content of (if you're adding to the bottom of the page, you may want to use the <body> node I guess) and then call one of:
insertBefore(theNewNode, afterThisNode);
insertAfter(theNewNode, thisNode);
Or possibly, but I'm not sure:
anExistingNode.innerHTML = anExistingNode.innerHTML + myNewContent;
That should be enough to get you started.

How to make $.get() data available to js?

I am using $.get() to load new content into a div. The content includes a list, each row having a title and a hidden description.
I have a separate jquery call that is meant to toggle the hidden div for each row when clicking on the title, which works fine when the data already exists (default content loaded with the page), but when it's dynamically replaced with a $.get() call, the divs then seem to become invisible to the command..
Any ideas? Do I need to somehow get javascript to refresh it's version of the DOM?
TY

Try this instead. This will bind elements that are inserted after the page loads:
$(".show_link").live('click', function (e) {});
The way you are binding the command it only happens when the page loads, so it will only bind those elements that match the selector at the time the page loads. Since you are inserting the markup after the page loads, jquery does not know those elements exist and therefore not wired to your function. Like I said above, try using .live() instead.

The DOM should update automatically. Are you sure the content you're loading has the appropriate Ids?
Try manually browsing to the URL used in the AJAX call and compare what you get with what's originally in the page. It's also possible you're retrieving spurious tags (html, body, etc) which may interfere with your JQuery selector

Problem getting Javascript variable to hidden input value

I'm trying to create a system where you can drag and resize divs (jquery ui) and then save the positions and sizes to a css file.
I already got the system working with one div, but now that I tried to update the system to support multiple divs, I ran into a problem.
The source: http://ezmundorf.110mb.com/problem.txt (It's ugly, but I'm pretty much just trying out how stuff works).
When I click the #update div the page goes blank and source for the page is only the form starting tag. The page is trying to do something since firefox is displaying the loading graphic.
If I remove the line the that writes the hidden input fields, I get to see the save button, yet still there's something wrong with the javascript since browser just keeps doing something.
I'm sorry for posting such a "fix this code for me" question here, but I don't know how to explain it without whole code and I couldn't find answer anywhere.

You can't use document.write after the page has finished loading without it overwriting the whole page, as you're seeing.
You should use .innerHTML on some container, for example:
$('myDiv').innerHTML = '<form>...</form>';
or use DOM methods:
var form = document.createElement('form');
var body = document.getElementsByTagName('body')[0];
body.appendChild('form');

You can't use document.write after the page has finished loading (e.g. in an event handler, including $(document).ready). Instead, you can use the jQuery method .html(val) to change the contents of an existing element, or insert new elements into the DOM with the other jQuery manipulation methods.