how do I access a HTML element from javascript using id,the html element belongs to another html document

Question

Continued from the question title:

also the other html document is loaded in the parent using AJAX,like this:

$.ajax({
        url: 'calender.aspx',
        cache: false,
        dataType: "html",
        success: function (data) {
           $(".mainBar").html(data);
        }
    });

I need to get a table from calender.aspx which has id 'tableID';

Answer 1

从您的成功回调中：

$(data).find("#tableID");

Answer 2

In your example, you appear to be inserting the document into your document via the line $(".mainBar").html(data); . That being the case, you can then just get it via $("#tableId") once you've done that:

$(".mainBar").html(data);
var theTable = $("#tableId");

If your goal is not to append everything, but to do something else, you can build up a disconnected DOM tree by doing $(data) , and then search it via find :

var theTable = $(data).find("#tableId");

Answer 3

As a side note, you can just use .load . However, you would do this:

var $table;

$.ajax({
        url: 'calender.aspx',
        cache: false,
        dataType: "html",
        success: function (data) {
           $table = $(data).find('#tableID');
           $(".mainBar").empty().append($table);
        }
    });

Same thing with .load :

var $table;
$('.mainBar').load('calendar.aspx #tableID', function(html) {
   $table = $(html).find('#tableID');
});