在PHP页面上显示JS的另一种方法？

i am retrieving some information from Google's API and placing them in a single variable, and then inserting them to a div in the DOM like so:

$(function() {
    // Load the info via Google's API
    $.getJSON("https://www.googleapis.com/plus/v1/people/103039534797695934641/activities/public?maxResults=5&key=AIzaSyBaDZGM-uXuHc-VZZ2DINzVBcIDMN_54zg", function(data) {

        // Variable to hold the HTML we'll generate
        var html = '';
        // how many posts we're displaying on the page
        var numberOfPosts = 3;

        // Loop over the results, generating the HTML for each <li> item
        for (var i=0; i<numberOfPosts; i++) {
            html += '<article>';
            html += '<img src="'+data.items[i].actor.image.url+'">';
            html += '<p>'+data.items[i].title+'</p>';
            html += '<p>'+data.items[i].published+'</p>';
            html += '</article>';
        }

        // Insert the generated HTML to the DOM
        $('.google-posts-container').html(html);
    });
});

My question is: is there a way to store every piece of information in each of its own variable, and then get the information individually by echoing the variable? So i dont have to hardcode all that HTML.

back in the days I would do:

<div id="google-posts-container">
    <article>
        <img src="{{image}}">
        <p>{{title}}</p>
        <p>{{published}}</p>
    </article>
</div>

<script type="text/javascript">
// render a template (replace variables and return html)
function renderTemplate(tmpl, data){
    for (k in data){
        while(tmpl.indexOf('{{'+k+'}}') > -1){
            tmpl = tmpl.replace('{{'+k+'}}', data[k]);
        }
    }
    return tmpl;
}
$(function(){
    // our template
    var template = $('#google-posts-container').html();
    $('#google-posts-container').html(''); // or clear()

    $.getJSON("https://www.googleapis.com/plus/v1/people/103039534797695934641"
        +"/activities/public"
        +"?maxResults=5&key=AIzaSyBaDZGM-uXuHc-VZZ2DINzVBcIDMN_54zg", function(data) {
        // Variable to hold the HTML we'll generate
        var html = '';
        // how many posts we're displaying on the page
        var numberOfPosts = 3;

        // Loop over the results, generating the HTML for each <li> item
        for (var i=0; i<numberOfPosts; i++) {
            html += renderTemplate(template, {
                image : data.items[i].actor.image.url,
                title : data.items[i].title,
                publish : data.items[i].published
            });
        }

        // Insert the generated HTML to the DOM
        $('.google-posts-container').html(html);
    });

});
</script>

nowadays I use angularjs

About comment by 'galchen' - don't use angular.js for serious &(or) big projects. Just look at source code. (can't add sub comment, thats why i wrote to main branch)