Javascript-better method of writing HTML

This problem is about Javascript writing HTML code for video player. I think there are some faster methods(document.createElement,Jquery and etc). Please tell some better and faster methods for this procedure. Thanks in advance

    function createPlayer(videoSource){
            document.writeln("<div id=\"player\">");
            document.writeln("<object width=\"489\" height=\"414\" >");
            document.writeln("<param name=\"player\" value=\"bin-    debug/FlexPlayer.sw开发者_StackOverflowf\">");
           //etc
            document.writeln("</embed>");
            document.writeln("</object>");
            document.writeln("</div>");               
    }

Going native with document.createElement will be the fastest. However, if your markup is large, going this way makes it a maintenance nightmare. Also, it is not easy to 'visualize' things.

In those cases, you might want to go for a tradeoff with client side templating solutions such as jQuery templates or underscore templates or John Resig's microtemplating.

Another performance boost is to build your entire markup and add it to DOM at the very end (add children first, then add the parent to DOM).

There is a jQuery function I know of that allows you to create a template HTML snippet which you can later use repeatedly with only 1 or 2 lines of code, adding in variables and appending it to the page.

For this you will need jQuery (latest should be fine) http://jquery.com/

Docs for the tmpl function are here: http://api.jquery.com/jquery.tmpl/

For details on how to use it you'd be best reading an example on the jQuery docs, I've not used it myself so can't write you a good example but there is great stuff on the docs site.

Hope this helps

EDIT: A less resource intensive way to acheive that function would be to, rather than writing each line in turn to the document, just append them all to a string and then write that once when you are finished.

Eg:

function createPlayer(videoSource){
            var html="<div id=\"player\">";
            html+="<object width=\"489\" height=\"414\" >";

            //etc            
            document.writeln(html);               
    }

This is faster because writing a line to the document uses more resources than just appending a string in memory. For MAXIMUM SPEED you could even declare the html var outside of the function and just set it to the markup as one long string, then write it - i.e

var html;
 function createPlayer(videoSource){
                html="<div id=\"player\"><object width=\"489\" height=\"414\" >"; //and so forth           

                document.writeln(html);               
        }

If you can justify the larger download sizes I'd go for the jQuery solution if possible, it's generally a bit more manageable - I've done plenty script generated HTML in the past and it very quickly becomes a pain to maintain. Good luck

You can try this:

function createPlayer(videosource){
    var div = document.createElement('div');

    div.innerHTML = '<object width=\"489\" height=\"414\" >' + 
        '.......'
    document.body.appendChild(div);
}

For general manipulation and addition of HTML I'd recommend jQuery. It makes the process much easier and quicker.

You will find more information on this here:

• jQuery Manipulation Methods - http://api.jquery.com/category/manipulation/
• jQuery Tutorials - http://docs.jquery.com/Tutorials