jQuery .html() large load

Question

I have been testing the jQuery .html() function and I have found that it does not work with large amounts of text, see this example . However the code for that is bug free, and a much simplified test case works perfectly.

I know that this probably isn't the best way to include large amounts of data into a div, but I intend to eventually load the data in from various arrays, and the code was meant to be a sort of constructor.

So onto my question: what am I doing wrong? Can jQuery just not handle that amount of text? And if so what is the best way to load multiple instances of the same html, with different text/urls in some parts, using jQuery/JavaScript/JSON? Should I populate the data from an array?

Thanks in advance, any help would be much appreciated.

EDIT based on answers

Hi thank, stupidly I overlooked an undefined variable. Here is a new working test case . What I am trying to accomplish is to have multiple blog posts that follow the same structural formula loaded into a page by jQuery 6 at a time. Is the best way to store this data in an array? And then populate the contents of those elements from the array?

Answer 1

The example you provided is throwing an error:

Uncaught ReferenceError: posterurl is not defined

After adding var posterurl = ""; , the code executed properly and performantly.

Here's a working fiddle .

Note: This is a horrible way to build a page.

Answer 2

Looking at your expanded question (thanks for taking the time), my instinct says that you're better off performing this on the server-side. This means that the document that you send comes pre-built with content, which has a major impact on an important visitor - Google. Otherwise, as far as the google-bots are concerned, your pages are empty and possibly hiding content, which they are strongly opposed to. A server-side built page also means that visitors with JavaScript disabled will get the same content. Loading content dynamically is fine and can be very useful, but building so much of the page from scratch in JavaScript is going a little too far (in my opinion).