Develop Reference

Issues accessing DOM innerHTML with JavaScript

I am using the Summernote WYSIWYG editor to provide users with functionality to edit HTML templates, and store changes to a personalised area. To do this I need to POST a set of text fields, along with the edited HTML, to the backend.
All is working as expected, except that the HTML that gets POSTed from the editable DIV, doesn't POST the updated DOM i.e. it's the original HTML template, without the edits.
If I use the browser dev tools console, I can use 'document.documentElement.outerHTML' to see the correctly updated DOM, but when I set a variable to get the outerHTML element by ID, I still only POST the original markup.
The variable within the script is as follows (based upon other StackOverflow answers):
var content = $('#template_text')[0].outerHTML;
As mentioned, this allows me to POST the content of the DIV, but doesn't POST the updates that a user makes to the template.
I have tried using innerHTML, outerHTML, html(), but essentially end up with the same result. If I use document.documentElement.outerHTML within the variable, this POSTs the updated values, but sends the whole document, rather than just the DIV (and I only want the DIV).
Any help would be greatly appreciated.

Instead of manipulating the DOM, We can go with the library's documented way like this,
var editedText = $('#summernote').summernote('code');
Hope this helps!

Is it good to generate Html page elements using AJAX queries?

depending upon UI inputs, i need to dynamically change (create or hide) other UI elements.
Also i don't want to refresh my page.Is it good to generate Html page elements using AJAX queries? Also what is the best way to do it?

I am using Knockoutjs's html binding to do the work. Here is the idea:
Create a global viewModel:
var _viewModel = {
body: ko.observable()
}
In the html page:
<div id="dynamic-part" data-bind="html: body" ></div>
In the javascript
ko.applyBindings(_viewModel, $('#dynamic-part')[0]);
whenever you want to load the dynamic-part, you can have kind of javascript code like follows:
$.get('/some/new/page/part', function(data) {_viewModel.html(data);});
When you apply the above technology along with sammy and LAB, you will get a very powerful one-page web application, where all the pages of the application can be load with ajax call.

Normally the way it's done is that the initial page has tags with identifiers, but no content in the divs. As your AJAX results come back, you set the innerHTML of those divs to the retrieved content, addressing them by identifier. Here's a page which explains it well.

At first you have to copy with the technical stuff.
How to make an AJAX request in the first place?
I would choose the jQuery library. This has a ajax function.
Then you decide:
Do you give back just some data and build the HTML content in JavaScript? (Here again jQuery is a good way to do it)
Or do you build the HTML on the server-side and just put it in my document using the ajax callback method success?
That's for starter

View HTML of jQuery injected code

I'm thinking of using a couple jQuery tools/plugins to dynamically change the DOM of a page:
http://plugins.jquery.com/project/appendDom
http://www.botsko.net/blog/2009/04/07/jquery-form-builder-plugin/
When the new DOM is changed, I can use Firebug to see the new elements as they are added, but I'm wondering if anyone has suggestions on how I can also build an .html page that can be saved off after a number of elements have been added.
My ultimate goal is to create an HTML Form Builder that will generate the HTML output so I can save the work as I go along. I also want to take the output that was generated and upload it, have it parsed, which will allow me to continue working at another time.
Any thoughts on how to at least get the .html file would be great or tools that I can use.

Assuming that you will just be needing the bits inside the body tag of the page you can get the HTML with document.body.outerHTML.

You can use the native outerHTML:
vat thehtml = $('#yourElement')[0].outerHTML;

You could use jQuery to get the HTML of the entire <body> section:
$('body').html();

Parsing HTML Response in jQuery

My page needs to grab a specific div from another page to display within a div on the current page. It's a perfect job for $.load, except that the HTML source I'm pulling from is not necessarily well-formed, and seems to have occasional tag errors, and IE just plain won't use it in that case. So I've changed it to a $.get to grab the HTML source of the page as a string. Passing it to $ to parse it as a DOM has the same problem in IE as $.load, so I can't do that. I need a way to parse the HTML string to find the contents of my div#information, but not the rest of the page after its </div>. (PS My div#information contains various other div's and elements.)
EDIT: Also if anyone has a fix for jQuery's $.load not being able to parse response HTML in IE, I'd love to hear that too.

If the resource you are trying to load is under your control, your implementation spec is poorly optimized. You don't want to ask your server for an entire page of content when you only really need a small piece of that content.
What you'll want to do is isolate the content you want, and have the server return only what you need.
As a side note, since you are aware that you have malformed HTML, you should probably bite the bullet and validate your markup. That will save you some trouble (like this) in the future.
Finally, if you truly cannot optimize this process, my guess is that you are creating an inconsistency because some element in the parsed HTML has the same ID as an element on your current page. Identical ID's are invalid and lead to many cross-browser JavaScript problems.

Strictly with strings you could use a regular expression to find the id="information" tag contents. Never parse it as html.
I'd try the $.load parameter that accepts a html selector as well
$('#results').load('/MySite/Url #Information');

Can you insert a form onto a page using jQuery's $.load() function?

I have a page where there's a drag and drop table where the order of the rows determines the value of a subtotal. However, it's more complicated than just addition and I would rather not duplicate the logic in JavaScript to update the values.
A simple solution would be to reload the whole page using Ajax and then replace the table from the page fetched via Ajax. Perhaps it's not the most elegant solution but I thought it'd be a quick way to get the job done that would be acceptable for now.
You can do that with jQuery like this:
$('#element-around-table').load(document.location.href + ' #table-id');
However, my "simple" solution turned out to not be so simple because the table also contains a <form> tag which is not being displayed in Firefox (Safari works).
When I inspect the page using Firebug, I see the form, but it and its elements grayed out.
Searching on the web, I found a rather confused post by a guy who says FF3 and IE strip <form> tags from innerHTML calls.
I'm probably going to move on to do this some other way, but for my future reference, I'd like to know: is this the case?

That post is rather confused, I just tested your code and it worked fine. The form tag was shown in firefox 3.0.8 just fine.
Looking at you code example, though I wonder if you just gave an incomplete example... make sure that the page you call returns only the html that goes inside that wrapper element.

I've run into this type of thing before. FORM tags need to be added to the DOM. If they're added using a method that writes to innerHTML, the tag will appear, but it won't be there as far as JavaScript is concerned.