organize HTML inside Javascript functions

Question

Consider a Javascript function to add a HTML element to a page. In that function a line where you specify the HTML of the element is needed. But if this HTML is complex, then it can make your code look ugly and difficult to debug. Consider the following example (play attention to the ul.innerHTML like):

function addHTMLField(area,limit) {
        var field_area = document.getElementById(area);
        var all_inputs = field_area.getElementsByTagName("ul");
        var last_item = all_inputs.length - 1;
        var last = all_inputs[last_item].id;
        var count = Number(last.split("_")[1]) + 1;
        if(count > limit && limit > 0) return;
        if(document.createElement) { //WC3 Dom method
            var ul = document.createElement("ul");
            ul.innerHTML = "<ul style='margin-top: 10px' id='blog_"+count+"'><li>Blogname:<br/> <input type='text' name='blog["+count+"][name]' size='40' /></li><li>Blog Title:<br/> <input type='text' name='blog["+count+"][title]' id='blogtext_"+count+"' size='40' /></li><li>Username:<br/> <input type='text' name='blog["+count+"][username]' id='blogcategory_"+count+"' size='40' /></li><li>E-Mail:<br/> <input type='text' name='blog["+count+"][email]' id='blogcategory_"+count+"' size='40' /> <br/><small>A new user will be created if the above email address is not in the database. <br/>The username and password will be mailed to this email address. </small></li><li><input type='button' value='Remove Blog' onclick=\"removeItem('blog_"+count+"')\"> </li></ul>";
            field_area.appendChild(ul);                     
        } else {
            alert('an error occurred in the addLinkField function');
        }
    }

Is there a better way than this to organize HTML inside Javascript functions? Note that I cannot make all the HTML external to the Javascript because some fields are filled in dynamically.

Thanks for any insights.

Answer 1

I think separating code and HTML is really important. Editing HTML within a JavaScript is a horrible ordeal. There are solutions for this that work fine with dynamic variables.

There are Javascript templating engines like this one: PURE.

John Resig (Author of JQuery) also put together a micro-templating engine. The examples show a nice way of using HTML code taken from a hidden div within the page which I find a near-perfect solution: That way the HTML is where it belongs, but can be filled in by you dynamically. And I'm no JQuery fanboy, but I tend to trust blindly that if a guy like Resig built it, it's also o.k. to use from a performance perspective.

Answer 2

I was a big fan of XML-XSLT running on the browser, to separate well the JS and HTML.

But then we turned to JSON +1 year ago, and PURE was our response to the loss of a similar separation.

We are building a web app(soon in beta) totally based on PURE for the HTML.
The clear cut makes the front-end development a joy to build and maintain.