Search code examples
javascriptjqueryjquery-load

JavaScript: Write to current HTML document using input from a separate HTML document?

Preface: Hi, all! Here goes. First and foremost, I am not familiar with jquery, so any jquery code posted will be irrelevant to me until i research it. I'm newly teaching myself JS. I have decent XHTML experience, decent CSS3 familiarity/understanding, and some (very little) application programming experience (C++, Java).

The Situation: I'm designing a website's home page whereon, with JavaScript enabled, links are overwritten and instead of loading a new HTML document/page for each main link, I alter sections of the home page using JS.

The challenge: I want to load new page content without loading an entirely separate page. A similar old HTML solution to such a challenge was to load page frames, right? I want to overwrite an entire container element using content from another separate HTML file on the server. (The external file could be tailored to fit into the main page, but it would be even better if I could pull a SECTION of an external HTML document, perhaps one element).

  • Can I do this using only JavaScript?
  • If not, what other scripting could be used in conjunction with JS?
  • Would I need to implement "AJAX"?
  • Must I use "HTML DOM"? - Edit: I see that DOM is just integral to the function of HTML etc.

Thank you all for your patience and your expert advice. I <3 StackExchange.

Solution

  • Yes you can do that using Javascript and jQuery, take a look at the load() method that's exactly what you need

    http://api.jquery.com/load/

    Yes it is using AJAX, but it's really easy to use don't worry.