关于动态html/dom创建的过程
用过jquery的都知道下面这种用法：
?
make: function(tagName, attributes, content) { var el = document.createElement(tagName); if (attributes) $(el).attr(attributes); if (content) $(el).html(content); return el; },?这段代码是backbones.js View对象的方法，就是为了方便创建一个document element，以对象实行返回。
?
我在编程实践中弄了一个自己觉得蛮好用的一个类，对于创建dom对象很方便，尤其是有属性继承情况的。
先贴代码：
/**
* Beginclass defination XHtml : Html Dom生成辅助类*/varXHtml =Base.extend({constructor: null,dump : '' // 避免,结尾，在IE浏览器中语义错误},{createFn : function(tag, attr){return (function(tagIn, attrIn){return function(text, attr){attr = attr || {};if(attrIn)$.extend(attr, attrIn);var attrStr = '';for(key in attr)attrStr += key + '="' + attr[key] + '" ';return '<{0} {1}>{2}</{0}>'.format(tagIn, attrStr, text || '');}})(tag, attr);}, input : function(val, attr){val= val || '';varattrStr= '';if(attr){for(keyin attr)attrStr+= key + '="' +attr[key] +'" ';}return '<input value="{0}" {1} />'.format(val, attrStr);}, sel : function(ll, val, attr, canBlank){varattrStr= '';if(attr){for(keyin attr)attrStr+= key + '="' +attr[key] +'" ';}var rr = '<select {0}>'.format(attrStr);var tpl = '<option value="{0}" {2} title="{1}">{1}</option>';vardefaultLabel = '-请选择-';if(canBlank){rr += tpl.format('', defaultLabel, '');}val = val || '';var optionStr = $(ll).map(function(){return tpl.format(this['code'], this['name'], val == this['code'] ? 'selected' : '');}).get().join('');return (rr + '{0}</select>').format(optionStr);}, dump : '' // 避免,结尾，在IE浏览器中语义错误});$.extend(XHtml, {createInput : function(attr){return function(val, attrIn){attrIn = attrIn || {};if(attr)$.extend(attrIn, attr);return XHtml.input(val, attrIn);};}, td : XHtml.createFn('td'),tr : XHtml.createFn('tr'),alink : function(txt, url, attr){var alinkIn = XHtml.createFn('a');attr = attr || {};attr.href = url;return alinkIn(txt, attr);},trJoin : function(attr){var arg = [];for (var i = 0; i < arguments.length; i++){if(typeof arguments[i] == 'string')arg.push(arguments[i]);}return XHtml.tr(arg.join(''), typeof attr == 'string' ? null : attr);}});$.extend(XHtml, {radio: function(name, ll, pender, keyName, keyVal, isFirstChecked, multiple){pender = pender || ' ';keyName = keyName || 'name';keyVal = keyVal || 'val';var fnRadio = XHtml.createInput({type: multiple ? 'checkbox' : 'radio', name: name});return _.map(ll, function(item, i){if(isFirstChecked && i == 0)return fnRadio(item[keyVal], {checked: 'true'}) + pender + item[keyName];elsereturn fnRadio(item[keyVal]) + pender + item[keyName];}).join(pender);}});?
思路只是简单的拼接字符串，并不是dom对象的创建和操作。
根据具体需求，可以在此基础上再封装一层，业务相关的所为所为控件的视图部分。
还比较好用。
?
比如创建一个table就可以以下面方式：
?
?
with(XHtml){var fnTable = createFn('table', {class: 'table1'});var tpl = fnTable(trJoin(td(input('A')), td(radio('testRadio', [{name: '男', val: 'M'}])), td(sel([{name: '男', val: 'M'}], null, {name: 'testSelect'})), td('')));$('#wrap').html(tpl);}?
很有Groovy HtmlBuilder的feel啊，有些模板引擎（ruby）之类的就是这样风格，其实javascript一样可以做到的