For Javascript devs
If you write Javascript apps you may want to dynamically add some HTML here and there and having HTML strings that need concatenation with different variables is bad and ugly at the same time. So here is a little nugget you might find useful.
1 2 3 4 5 | // standard style x = '<div class="' + classnames + '" rel="' + somevar + '" id="' + othervar + '">' + content + '</div>'; // html tag style x = htmlTag('div', {class:classname, rel:somevar, id:othervar}, content); |
Usage
htmlTag(tagName [, attributes [, content]])
or
htmlTag(tagName [, content [, attributes]])
The function can be called with one, two or three arguments. Beside the first one which is the name of the tag (string), the other two are optional and can be placed in whatever order you like.
For img tags, the content argument is set as src attribute or as value attribute for input tags if the attributes argument doesn't specify otherwise
attributes argument must be an object with key:value pairs and will be expanded as attributes of the tag
content argument is a string or number
1 2 3 4 5 6 7 8 9 10 11 12 13 | var classname = 'test', somevar = 2, id = 'mydiv', content = 'hello'; htmlTag('div', {class:classname, rel:somevar, id:othervar}, content); htmlTag('div', content, {class:classname, rel:somevar, id:othervar}); // will both return <div class='test' rel='2' id='mydiv'>hello</div> htmlTag('img', content) // <img src='hello' /> htmlTag('img', {src:'myImage.jpg'}, content) // <img src='myImage.jpg' /> content is discarded and attributes src is used as source htmlTag('input', {type:'text', name:id}, content) // <input type="text" name="mydiv" value="hello" /> |
The code
1 2 3 4 5 6 7 8 9 10 11 | function htmlTag(type) { var r="< "+type,o={},v='',x=0,a=arguments; a.length==3&&(((x=typeof a[1]=='object')||1)&&((o=a[-~!x]||{})&&(v=a[-~x]||'')))||a.length==2&&(typeof a[1]=='object'&&(o=a[1]||{})||(v=a[1]||'')); for(var i in o)r+=" "+i+"='"+o[i]+"'"; (type=='img'||type=='br'||type=='input')&&((!o.src&&v)&&((type=='img'&&(r+=" src='"+v+"' />"))||(type=='input'&&(r+=" value='"+v+"' />")))||(r+=' />'))||(r+=">"+v+"< "+"/"+type+">"); return r; } function queryTag(type) { return $(htmlTag.apply(this, arguments)) } |
queryTag function just wraps the newly created html in a jQuery object so you can have something like this
1 2 3 4 5 | $("#menu").append( queryTag('div', {class:'menuItem'}, 'Click me').click(function() { alert('clicked'); }) ) |