JavaScript: Best approach for managing/adding content on fly and page load

Which technique is better to manage content that gets added on the fly and also need to be rendere开发者_运维知识库d on page load.

Some options here (not sure which one is easier to manage and better for performance):

• render content using JavaScript only (also for page load)
• render duplicate markup as template on page load and do a find replace when adding content on fly. For example: <div id={Id}>{Name}</div>
• different approach?

Also how to handle this for complicated modules with lots of moving parts.

---

If you are using node.js http://socket.io is a lifesaver. Using node.js, You can also write the same templates that can be executed server and client side. At the point you have the flexibility to do whatever you want, with little duplication.

---

Depends on your server-side architecture. Simply find a template engine that has both and js support.

Then bolt on partial views that match your partial view API (They are all different and seperate from template engines)

Now re-use your views on the server and client.

So basically you enhance your markup with javascript and ajax to partially update partial views on the fly.

of course your REST API exposes the data as both json and html so you can easily get either the raw data or the rendered view from your server.

As mentioned node.js makes this functionality very easy to achieve ;)

---

What I do is use a jQuery plugin to create the DOM elements (http://mg.to/2006/02/27/easy-dom-creation-for-jquery-and-prototype)

I have this site, where i have to update the header and create the upload form once the user has been authenticated with facebook. I am doing this with javascript, to avoid a complete page refresh

var upload_form = $.FORM({ action: "main", method: "post", enctype: "multipart/form-data" }, 
     $.DIV({ className: "fields" }, 
           $.INPUT({ name: "title", value: "Titulo de la foto", className: "overlay", id: "name" }),
           $.INPUT({ name: "location", value: "Lugar donde fue tomada", className: "overlay", id: "location" }),

           $.INPUT({ type: "hidden", value: response.session.uid}),
           $.INPUT({ type: "hidden", id: "username_input" }),

           $.DIV({ className: "image_upload" },
                 $.SPAN({}, 
                        $.INPUT({ type: "file", name: "image", className: "overlay"})
                       )
                ),

           $.A({ href: "javascript:;", id: "submit" }, $.IMG({ src:"public/images/upload.jpg" }))
          )
    );

 var logged_header = $.SPAN({},
       $.A({ href: "javascript:;" },
           $.IMG({ src: "http://graph.facebook.com/" + response.session.uid + "/picture?type=square", 
                 className: "picture", height: "20", align: "left" })
          ),
       $.SPAN({ id:"username" }, "Cargando... "),
       $.A({ id: "fb_logout" }, "(cerrar sesion)")
      );

DOM creation is very simple and straight forward.

$.ELEMENTNAME({ <json object with attributes> }, content);

Now upload_form and logged_header contain HTML. notice how logged_header gets updated with some variables after added to the document.

     FB.Event.subscribe('auth.login', function(response) {
        $("#login").html("").append(logged_header);
        $("#upload .content").html("").append(upload_form);

        $("#username").html(rows[0].name + " ");
        $("#username_input").val(rows[0].name);
     });