Appending PHP generated HTML to document fragment

Question

I need to append a large amount of PHP generated HTML (5000 div elements) to a document fragment and append that to the body of the page.

Example HTML (this is just part of the StackOverflow source, but it is similar):

<div itemscope itemtype="http://schema.org/Article">
<link itemprop="image" href="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png">
<div id="question-header">
    <h1 itemprop="name"><a href="/questions/4287357/access-php-variable-in-javascript" class="question-hyperlink">Access PHP variable in JavaScript [duplicate]</a></h1>
</div>
<div id="mainbar">



<div class="question" data-questionid="4287357"  id="question">

            <div class="everyonelovesstackoverflow" id="adzerk1">
        </div>


    <table>
        <tr>
            <td class="votecell">


<div class="vote">
    <input type="hidden" value="4287357">
    <a class="vote-up-off" title="This question shows research effort; it is useful and clear (click again to undo)">up vote</a>
    <span class="vote-count-post ">2</span>
    <a class="vote-down-off" title="This question does not show any research effort; it is unclear or not useful (click again to undo)">down vote</a>

    <a class="star-off" href="#" title="This is a favorite question (click again to undo)">favorite</a>
    <div class="favoritecount"><b>1</b></div>   


</div>

I have broken the problem into 2 smaller problems:

Store PHP variable in Javascript: var tmp = "<?php Print($DOM); ?>";
Append HTML into document fragment (Looked at this but it's about something else)

How can I get this to work?

Store PHP variable in Javascript: http://php.net/manual/en/function.json-encode.php — Saturnix, Apr 23 '13 at 00:24
how about you just generate the HTML code with PHP and print it out? Why can't you do that? — Saturnix, Apr 23 '13 at 00:25
That's what I've been doing originally but I want to see if there are performance gains by using a document fragment. Currently, it takes 5 seconds to load because I am going through multiple loops and printing the HTML out. As there are over 5000 divs, having to grab data and paint constantly seems to slow it down substantially. — theintellects, Apr 23 '13 at 00:34
u can use jquery request the 5000 div elements and add it to the html. 5000 should be all right unless you have more items. — wayne, Apr 23 '13 at 00:35
I would first create a skeletal structure in a variable and one documentfragment. PHP only delivers a JSON-array of objects with key=queryselector(without # or .) value=content.(loop) Clone the structure into the documentfragment. Than queryselect and fill the structure with contents. Then appendchild the fragment to the body.(loop end) To be tested for speed! — B.F., Sep 09 '14 at 06:49

score 1 · Accepted Answer · answered Apr 23 '13 at 01:19

I have been using jsrender a lot lately to deal with formatting large amounts of JSON/Javascript data into HTML. This lets me pack more data into fewer bytes, and then have the client create large swaths of HTML using a template. Here is a simple example:

<html><head>
    <script type="text/x-jsrender" id="historyTemplate">
        {{if orders}}
            <h1>Your Order History</h1>
            <table>
                <thead>
                    <tr><th>Order Name</th><th>Amount</th><th>Status</th><th>Tracking</th></tr>
                </thead>
                <tbody>
                    {{for orders}}<tr>
                        <td><a href="{{>orderId}}" class="orderDetailLink">{{>orderName}}</a></td>
                        <td>{{>total}}</td>
                        <td>{{>status}}</td>
                        <td>{{if trackingNumber}}
                            <a target="_new" href="{{:trackingURL}}">{{>trackingNumber}}</a>
                        {{/if}}</td>
                    </tr>{{/for}}
                </tbody>
            </table>
        {{else}}
            <h1>You have no prior webstore orders.</h1>
        {{/if}}
    </script>

    <script type="text/javascript">
        var customer = {
            name: 'Joe Bloe',
            orders: [
                {   orderName: 'Joe Bloe 2013/04/01 #595',
                    total: 59,
                    status: 'Not yet shipped',
                    trackingNumber: null,
                    trackingUrl: null
                },
                {   orderName: 'Joe Bloe 2013/04/15 #876',
                    total: 32.50,
                    status: 'Shipped',
                    trackingNumber: '55512345',
                    trackingUrl: 'http://www.shipper.com/track?55512345'
                },
            ]
        };
        $("#orderDiv").html( $('#historyTemplate').render(customer) );
    </script>
</head><body>
    <h1>Your Order History</h1>
    <div id="orderDiv"> </div>
</body></html>

The data can be part of the page when it is served, or it can arrive via AJAX or JSONP, or it can be dynamically generated by the client itself. So far, I have never had a performance problem with it.

Appending PHP generated HTML to document fragment

1 Answers1