How to output multi-line HTML with variable interpolation using Javascript?

I'm trying to output the following each time a function is run:

<object id="video" width="500" height="500" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"playlist":["poster_location", {"url": "clip_location","autoPlay":false,"autoBuffering":true}]}' />
<img src="poster_location" width="500" height="500" alt="Poster Image" title="No video playback capabilities." />
</object>

and I'd like to interpolate javascript variables within certain parts of the code (to change the video/poster etc).

I realise this can be done by targeting each part that needs to be changed using document.getElementById and changing it that way, but, for various reasons, I need to remove and re-build the whole element each time the function is run.

So is there a good way to output html using javascript in a fashion similar to php's echo?

I'm also using jQuery, if that helps.

Answers


The hotest jQuery approach currently is the jQuery Template plugin. Now the question is, should you be doing this kind of DOM manipulation on the client side at all? That is a decision only you can make. However if it is what you need to do, the Template Plugin is handy. For the particulars see John Resig's writeup.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js" type="text/javascript"></script>
    <script id='summaryTmpl' type="text/x-jquery-tmpl">
            <li><h1>${Name}</h1>
            <object id="video" width="500" height="500" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
                    <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
                    <param name="allowfullscreen" value="true" />
                    <param name="flashvars" value='config={"playlist":["${PosterLocation}", {"url": "${Location}","autoPlay":false,"autoBuffering":true}]}' />
                    <img src="poster_location" width="500" height="500" alt="Poster Image" title="No video playback capabilities." />
            </object>

    </script>
    <script type="text/javascript">
            (function($){
             var movies = [ { 'Name':'die hard', 'Location':'http://someurl.com/vid.mpg', 'PosterLocation':'http://whereismymovieposter.net' }, { 'Name':'long kiss goodnight', 'Location':'http://whereisit.com'} ];
             $(function(){
                        $("#summaryTmpl").tmpl(movies).appendTo("#moviesList");
                });
             })(jQuery);
    </script>
</head>
<body>
       <ul id="moviesList"></ul>
</body>
</html>

You can use multiline strings in JavaScript like so:

var str = "Blah blah blah \
    note the backslash that escapes the end of line";

Alternatively you can simply close the string and reopen it on the next line:

var str = "Blah blah blah "
    +"and this way you don't get 'Empty Text Node' all over your DOM";

Need Your Help

offline document for go/golang

linux ubuntu go document

Is there any Ubuntu go offline document package that I can install so that I can read the package docs for Go offline?

User-defined literals (Extended literals) of C++11… which compilers support it?

c++ metaprogramming c++11 user-defined-literals

In another thread I introduced some techniques we would use for Model-Driven-Development in C++ once C++11 features, in particular user-defined literals, are available. I just revised the plans for...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.