AleX_ AleX_ - 1 year ago 42
HTML Question

How to get specific elements from a list of DOM objects that have been loaded from an external page

Is there a way to get specific DOM elements by id (and/or class) from an array of DOM elements that has been created using jQuery parseHTML function?

I am not looking for document.getElementByID() as it gets elements from the current page.


I have to create a pdf from a web page that has dynamic content. in order to keep the pdf look consistent, I have created an html template with fixed-sized elements that have specific ids.

I would like to write a java script code that:

1 - loads the contents of the template page,

2 - grabs specific s from the current page (that have specific id's) and

3 - inserts these specific s into the target areas of the template.

the way I am doing this is:

read the template file using AJAX asynch functions and store it into a variable called templ.

then follow a pattern like this:

var template = $.parseHTML(templ); //gives an array of DOM elements

//loop through all the children and children of children of template and when I found a match:
var a = $('#id_of_div_in_source_page'); //
template[i].children[j].children[k].children[l].innerHTML = a.html();

finally export 'template' into html.

I am looking for way to skip the whole looping process.

p.s. it is a little bit different that this question because I have to do it for multiple elements.

Answer Source

My solution was based on @adneo's comment. I looped through all the elements and called outerHTML and concatenated it into a string:

var outputHTML = "";
for(var j = 0; j < template.length; j++)
   var temp = $(template).get(j).outerHTML; //temp is undefined for empty nodes!
   if(temp !== undefined)
      outputHTML += temp;

Thanks to Adeneo.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download