Question

Rewriting an html element’s content, or itself is easy via jquery, but is it possible to replace an element with an element that exists on another page/file? My point is that i don’t want this info that i’m trying to retrieve to be on the page by default as it would clog up the file and bloat the file size…

To provide context: I have an unordered list in my html. Say it’s a grocery list. I have some option that changes the list to a bill of materials instead. So it replaces the ul with the ul (and it’s li children) with this new set, of which is located in an external html file. (that file being just an ul and li’s.) I want this external/retrieval because these lists could be quite long, and i need the lists to be DOM elements because i need to work with them via other scripts, etc.

Regex on a text file that’s been prepared for this operation isn’t a perfect solution either, since these li’s will have a/> tags within, and there’s a variety of classes across the li’s as well…

I pretty much want to append an html file to the DOM, i suppose.

Answer 1

Try this:

jQuery.get('myFile.html', function(data) {
  jQuery('#myElement').html(data);
});

Or to replace the element itselft:

jQuery.get('myFile.html', function(data) {
  jQuery('#myElement').replaceWith(data);
});