Using JQuery with a string (instead of DOM)

Question

I remember using a plugin in the past where I could use AJax to load a page and update only part of the DOM. The AJax request returns the entire HTML page, but only a small portion of it replaces part of the currently loaded DOM.

For example, SO can use this function to fetch http://stackoverflow.com and only update #content. SO would make an AJax request to fetch http://stackoverflow.com, fetch #content from the returned string, and update #content of the DOM.

Sorry if my question is confusing. How would I do this without a plugin?

Your question is not very clear, or I'm having a problem understanding it. "How would I do this without a plugin?" What does "this" refer to? What you were referring to in your example is the $.fn.load method. — user400654
– user400654, Commented Apr 20, 2012 at 21:49

Anthony Grist · Accepted Answer · 2012-04-20 21:48:21Z

3

The .load() function is designed to do this. Just include a selector for an element along with the URL, like so:

$('#content').load('http://stackoverflow.com #content', optionalCallbackFunction);

That will replace the content of the element with ID content on the current page, with the contents of the element with ID content on the page returned by an AJAX request to http://stackoverflow.com, then run the function called optionalCallbackFunction. Assuming, of course, that the request was successful.

answered Apr 20, 2012 at 21:48

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Prestaul Over a year ago

So $('some element to replace the content of') is probably $('#content').

Joseph Caruana Over a year ago

yes - ajax.load is your main option here. Refer to this link full the details: api.jquery.com/load. It includes the full description of how to load portion of the page as highlighted by Anthony above.

JFK Over a year ago

The only thing I don't like about the .load() method is that it actually loads the whole page first and then it gets the content from the specific section with id="#content" in this case. It is pretty much like having a hidden inline content.

Anthony Grist Over a year ago

@JFK I see your point, though I can't think of any way to avoid loading the entire page in a purely Javascript solution.

Larsenal · Accepted Answer · 2012-04-20 21:55:47Z

0

Without the AJAX, you can parse a raw string like this:

var str = "<div><h1>Page Title</h1><div id='content'>This is new.</div></div>";
var text = $("#content",$(str)).html();
$('#content').html(text);

answered Apr 20, 2012 at 21:55

Larsenal

51.5k43 gold badges155 silver badges224 bronze badges

Collectives™ on Stack Overflow

Using JQuery with a string (instead of DOM)

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related