How To Access Dynamically Created Page Elements with jQuery (not events, ELEMENTS!)

Question

I have several dynamically created elements on a page that I would like to POST the contents using jQuery to another page. The problem is, the elements created cannot be accessed via jQuery (only elements that existed on the page can be accessed using the $(#myElementID). I've seen hundreds of posts using the live() and on() functions for accessing EVENTS, but no way to access any properties, values, innerHTML, etc, of the dynamically created ELEMENTS. Is this simply not possible to do with jQuery?

    $('#btnParseTable').click(function () {
        var tblCustomPattern = $("#tblCustomPattern").innerHTML; 


   //This test alert yields "" because tblCustomPattern is undefined - yet FireBug clearly shows the table exists!
        alert(tblCustomPattern); 


 var postData = { "method": "ParseTable", "tbl": tblCustomPattern };
        $.post("tiler.aspx", postData, function (data) {
            $("#test").html(data); //for testing
        });

});

If not supported by jQuery, can this be done in JavaScript or is it not possible to post back information that is NOT an "INPUT" element?

Answer 1

In this part of your code, you have a problem:

$("#tblCustomPattern").innerHTML;

The issue is that $("#tblCustomPattern") is a jQuery object. It is not a DOM object. The jQuery object does not have a property .innerHTML.

So, to fix your issue, you have several choices:

1. You can get the DOM element out of the jQuery object and then use the .innerHTML property on the DOM object directly.
2. You can use the jQuery method for this same functionality by called the jQuery .html() method.
3. You don't even really need jQuery for this at all, so you can just use plain JS.

So, any of these will work:

// get the first DOM object from the jQuery object
//    two different methods for doing that
var tblCustomPattern = $("#tblCustomPattern")[0].innerHTML; 
var tblCustomPattern = $("#tblCustomPattern").get(0).innerHTML; 

// use the jQuery method to get the HTML
var tblCustomPattern = $("#tblCustomPattern").html();

// use plain JS - fastest option
var tblCustomPattern = document.getElementById("tblCustomPattern").innerHTML;

Answer 2

This test alert yields "" because tblCustomPattern is undefined - yet FireBug clearly shows the table exists!

You can assess dynamically created element after they being added to DOM. tblCustomPattern is undefined because jQuery object does not have attribute innerHTML You need DOM element to use innerHTML but the selector will return you jQuery object. You can use indexer [] or [get()][1] to get html element from jQuery object. It is zero-based index and you will get first element at zero index.

var tblCustomPattern = $("#tblCustomPattern")[0].innerHTML; 

OR, using .get()

var tblCustomPattern = $("#tblCustomPattern").get(0).innerHTML; 

OR using html()

var tblCustomPattern = $("#tblCustomPattern").html();