Getting The Method Of Large InnerHTML Entries?

Basically, I've been asked to create a system where the page doesn't refresh when you go from page to page on a different site. That is, it's going to almost function like an iFrame. There will be a general template on the outside of the content, but the content itself will change when someone clicks on a link on a top banner. I've decided to use innerHTML to dynamically change the page content (I chose this instead of hiding layers because there are some large images/components in the content of the other pages, and I don't want them to all load on start up).

First off, if you think there's a better way to go than innerHTML, please briefly let me know, but this appears to be the way we're going. The contents of these pages are large, often with many elements. So it's not like I can just put some text in a javascript file and say "change to this text". Line breaks, etc. would mess it up. And I'd like to make changing the content as easy as possible for coders who come after me. So I don't want to make just one huge line of text/code that the javascript will replace.We have php and smarty in use. They also like to use the MVC system here (if that makes sense to you). So what I'm thinking of is something like creating the content for the other pages as their own pages. Something like:

<div-content>
text
<img src="blah.jpg" />
</div>

then using php curl or fetch to grab the page, strip the line breaks, etc., and insert it into the javascript (which doesn't allow for breaks written into the text directly). I can do this by having PHP create the javascript file, but that's a bit messy, and I'm not sure if it conforms to MVC. Might be the best option though.