I have a case in which a client needs to be able to upload a JS and an HTML file to be displayed on a page via file upload fields.

The problem is that the HTML file that is delivered to the client is a full HTML file with headers, meta, styling.

I need to be able to have the client upload the full HTML file as they receive it, but pull out only the contents of a particular DIV to be displayed within the template/page.

<div class="CherryPickedHTMLWrapper">

How would I approach this scenario?

  • I know it would be easy enough to do this via an iframe. Just wondering if there is a cleaner way. Feb 18, 2013 at 21:44

1 Answer 1


I'm not sure I fully understand what you're trying to accomplish, but if you have a saved .html file on your site (via custom file upload or however you need) and want to display just the CherryPickedHTMLWrapper div, then the simplest option may be to load it via JQuery's .load() method: documentation. This method can load a local file into an element on your page, and you can even specify a page fragment, like so:

$('.result').load('uploads/test.html .CherryPickedHTMLWrapper');

If you prefer to do it server side, you would likely want to create a custom plugin to read in the file and parse the DOM to get the element you need. There are some tools to make this easier, such as PHP Simple HTML DOM Parser.

  • Client has licensed commercial financial calculators that are updated quarterly, but they come as an HTML and a JS file. The HTML file has embedded CSS and other bloat that we don't need. Just want the div that the calculators are in. I think either of these solutions will work great, thanks! Feb 19, 2013 at 15:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.