mg.to - Easy DOM creation for jQuery and Prototype - Comments

Notably missing is any

lanzz — Tue, 23 Oct 2012 11:06:04 +0000

Notably missing is any support for the <EM> tag.

Thanks!

Michael Geary — Thu, 16 Aug 2007 16:13:27 +0000

Thanks for chasing that down, Vishakha. I assume this code replaces the e = document.createElement( tag ); in the original? I’ll take a look at it and see if there is any way to simplify it, but it does sound like you’re on the right track.

Count on IE to make our lives more complicated! :-)

This plugin is not working for IE

Vishakha — Thu, 16 Aug 2007 12:14:00 +0000

Hi, I found the work around for this issue. The issue is specific to creating elements in IE. In IE you have to create radio buttons by using document.createElement("<input name='myradio' checked >") as the IE doesn’t allow the name or many other attributes to be set on input elements. So for this I made following change in jquery-dom.js file to run it in IE also.

// check for IE

if(document.all) {

if(tag == 'input'){

var a;

var checked = '';

for( var attr in attrs ) {

if(attr == 'name'){

a = attrs[attr];

}

if(attr == 'checked'){

checked = attrs[attr];

}

var input_text = '<input name="' + a + '"' + checked +' >';

e = document.createElement(input_text);

} else{

e = document.createElement( tag );

}

}else{

e = document.createElement( tag );

}

Is this correct solution? Please suggest me if you have some better solution for the above issue.

—Vishakha

This plugin is not working

Vishakha — Fri, 06 Jul 2007 05:15:40 +0000

This plugin is not working with IE for creating radio buttons.
It creates radio buttons but we can’t select that radio buttons. Is there any solution to solve this problem?

functions

carmen — Wed, 21 Mar 2007 21:54:59 +0000

ive taken it further, to complete programmatic view and behavior definition.. cheers

cl-who style

mac — Mon, 26 Feb 2007 02:21:00 +0000

Here’s how I’d generate the same html table. It might seems more natural to “certain” people :-)

$.create(

["table", 'class', 'MyTable',

["tbody",

["tr", 'class', 'MyTableRow'

["td", 'class', 'MyTableCol1' , "howdy"],

["td", 'class', 'MyTableCol2' , "Link: ",

["a", 'class', 'MyLink', 'href', 'https://www.example.com',

"example.com"]]]]]);

https://www.talrasha.com/jquery/jquery.easydom.js

Easier way to include inline styles

D Wachsstock — Tue, 13 Feb 2007 17:58:36 +0000

Probably easier to use an object for the style and take advantage of JQuery:

var ez_clearer = $.DIV({style: {clear: 'left'} })

with this code (using a variation of the the “ultimate fix” above):

if (attr == "style") {

$(e).css(attrs[attr])

}else {

$(e).attr(attr, attrs[attr])

}

or, even easier (skip the whole for (var attr in attrs) loop:

$(e).attr(attrs);

if (attrs.style) $(e).css(attrs.style);

Is download script updated?

Ashish Agrawal — Tue, 26 Dec 2006 13:39:58 +0000

After looking at JS, I followed bellow given comments. I think there are lots of updates (fix) that should be available in download able JS file. Right now I feel after download JS, I have to follow the thread and update script. Can anybody please post latest script!

Thanks

Use cellSpacing and cellPadding

Michael Geary — Tue, 21 Nov 2006 22:45:28 +0000

There are some attributes that are capitalized differently in the DOM vs. HTML. If you use cellSpacing and cellPadding it should work OK.

Cellspacing and cellpadding

Aleksandar Pavic — Tue, 21 Nov 2006 21:51:22 +0000

Hi I tried attributes cellspacing and cellpadding and they are not working/visible in DOM.

Please provide a working example

Thu, 02 Nov 2006 05:48:20 +0000

Please provide a link to a working example for this.

Optional Args

Demis Bellot — Wed, 04 Oct 2006 17:38:55 +0000

This is a fix that allows the attr ({}) to be optional without requiring the first arg to be a string.

if (typeof(args[0]) == 'string' || args[0].nodeType == 1) {

var newArgs = [{}];

for (i=0; i < args.length; i++) newArgs.push(args[i]);

args = newArgs;

}

RE: Question about the patch

Brandon Aaron — Mon, 18 Sep 2006 14:56:36 +0000

So I had to actually change the above line once again so that it would work for none DOM nodes.

if (arg.get) arg = arg.get(0);

The reason this is necessary is because each $.[tagName] returns a jQuery object.

RE: Question about the patch

Brandon Aaron — Sat, 16 Sep 2006 22:21:39 +0000

You know I had the same question but at the time I was more in a hurry to meet my deadline. After quickly looking back over the script and the patch it would seem that line 57 should not be changed but rather a new lined added after the check to see if arg is null in append (line 51). The new line should say:

arg = arg.get(0);

Honestly I’m still a little confused how arg ends up being a jQuery object but it needs to be a regular dom node before being appended.

Question about the patch

Michael Geary — Sat, 16 Sep 2006 17:17:59 +0000

Thanks for the kind words, Brandon.

Returning a jQuery object sounds like a great idea. I didn’t do it in my own code because I wanted to be able to use the DOM creation code standalone as well as with jQuery.

I have a question about the patch. The return $(e); makes sense, but what does the change to line 57 do? Given that arg is a DOM element, then $(arg).get(0) should just return arg. So I would expect that these two statements would be equivalent:

e.appendChild( arg );

vs.

e.appendChild( $(arg).get(0) );

Easy DOM creation for jQuery and Prototype

Michael Geary — Mon, 27 Feb 2006 19:07:54 +0000

Here is a jQuery plugin that makes it easy to build up a tree of DOM nodes. It lets you write code like this:

var table =

$.TABLE({ Class:"MyTable" },

$.TBODY({},

$.TR({ Class:"MyTableRow" },

$.TD({ Class:"MyTableCol1" }, 'howdy' ),

$.TD({ Class:"MyTableCol2" },

'Link: ',

$.A({ Class:"MyLink", href:"https://www.example.com" },

'example.com'

)

);

Basically, each function such as $.TABLE creates a DOM node and takes the following arguments:

The first argument is an object that list any attributes to be set on the node. You can specify the className attribute in a few different ways depending on your taste:

className: text

Class: text

'class': text

Any additional arguments after the first one represent child nodes to be created and appended. These arguments can be DOM elements themselves (e.g. inline $.FOO calls as above), or they can be numbers or strings which are converted to text nodes, or they can be arrays, in which case each element of the array is handled in this same way.

This interface is inspired by Bob Ippolito’s MochiKit DOM API, although it doesn’t implement all of the features of that one (yet).

The code predefines most of the common tags; you can add additional tags by calling:

$.defineTag( tagName ); // e.g. $.defineTag( 'dd' );

Or simply add the tag names to the tags list in the code.

One last definition is $.NBSP which defines a non-breaking space (same as   in HTML).

$._createNode is an internal helper function used by the $.FOO functions. I would have hidden it away as a nested function, but I wanted to avoid any unnecessary closures.

This code doesn’t actually depend on any of the features of jQuery except for the presence of the $ function—and it uses $ only as a way to avoid cluttering the global namespace. I haven’t tested it with Prototype.js, but it should work equally well there. Or the code can be used with no library, by preceding it with:

var $ = {};

Here is the source code, or you can download it:

// DOM element creator for jQuery and Prototype by Michael Geary

// https://mg.to/topics/programming/javascript/jquery

// Inspired by MochiKit.DOM by Bob Ippolito

// Free beer and free speech. Enjoy!

$.defineTag = function( tag ) {

$[tag.toUpperCase()] = function() {

return $._createNode( tag, arguments );

}

};

(function() {

var tags = [

'a', 'br', 'button', 'canvas', 'div', 'fieldset', 'form',

'h1', 'h2', 'h3', 'hr', 'img', 'input', 'label', 'legend',

'li', 'ol', 'optgroup', 'option', 'p', 'pre', 'select',

'span', 'strong', 'table', 'tbody', 'td', 'textarea',

'tfoot', 'th', 'thead', 'tr', 'tt', 'ul' ];

for( var i = tags.length - 1; i >= 0; i-- ) {

$.defineTag( tags[i] );

}

})();

$.NBSP = '\u00a0';

$._createNode = function( tag, args ) {

var fix = { 'class':'className', 'Class':'className' };

var e;

try {

var attrs = args[0] || {};

e = document.createElement( tag );

for( var attr in attrs ) {

var a = fix[attr] || attr;

e[a] = attrs[attr];

}

for( var i = 1; i < args.length; i++ ) {

var arg = args[i];

if( arg == null ) continue;

if( arg.constructor != Array ) append( arg );

else for( var j = 0; j < arg.length; j++ )

append( arg[j] );

}

catch( ex ) {

alert( 'Cannot create <' + tag + '> element:\n' +

args.toSource() + '\n' + args );

e = null;

}

function append( arg ) {

if( arg == null ) return;

var c = arg.constructor;

switch( typeof arg ) {

case 'number': arg = '' + arg; // fall through

case 'string': arg = document.createTextNode( arg );

}

e.appendChild( arg );

}

return e;

};