Simple loading of HTML fragment using jQuery AJAX

jQuery provides a simple load() function to load an HTML fragment using AJAX. To test it, create a test data file called data.html:

  
    

Item 1
Item 2
Item 3
Item 4

Next, create a target HTML file called testLoad.html in the same folder with the following jQuery statement:

When you view testLoad.html, you should see the list items in data.html inserted into the target file, in the unordered list named myLinks. It was a little fiddly to get this working the first time. If your source HTML file has an error, nothing seems to happen; in that case, check your browser's error console to see what went wrong. For instance, in Firefox, when my source HTML file wasn't well-formed, I found this error: Error: mismatched tag. Expected: . Source File: Line: 8, Column: 5 Source Code: Another thing I found is that you can't include an XML processing instruction ( lines) in your data file because when load() tries to insert your XML file into your target document, you would get an error like this: Error: XML or text declaration not at start of entity Source File: Line: 1, Column: 43 Source Code: