jQuery.create() - jQuery plugin to create HTML elements

jQuery.create() - it's a featured plugin for jQuery JavaScript Library.
You can create any types of HTML elements, set attributes and context or HTML using jQuery.create().
See below the HTML example declaration.

I think it make easy and fast your programming in JavaScript.


jQuery.create = function() {
if (arguments.length == 0) return [];
var args = arguments[0] || {}, elem = null, elements = null;
var siblings = null;

// In case someone passes in a null object,
// assume that they want an empty string.
if (args == null) args = "";
if (args.constructor == String) {
if (arguments.length > 1) {
var attributes = arguments[1];
if (attributes.constructor == String) {
elem = document.createTextNode(args);
elements = [];
elements.push(elem);
siblings =
jQuery.create.apply(null, Array.prototype.slice.call(arguments, 1));
elements = elements.concat(siblings);
return elements;

} else {
elem = document.createElement(args);

// Set element attributes.
var attributes = arguments[1];
for (var attr in attributes)
jQuery(elem).attr(attr, attributes[attr]);

// Add children of this element.
var children = arguments[2];
children = jQuery.create.apply(null, children);
jQuery(elem).append(children);

// If there are more siblings, render those too.
if (arguments.length > 3) {
siblings =
jQuery.create.apply(null, Array.prototype.slice.call(arguments, 3));
return [elem].concat(siblings);
}
return elem;
}
} else return document.createTextNode(args);
} else {
elements = [];
elements.push(args);
siblings =
jQuery.create.apply(null, (Array.prototype.slice.call(arguments, 1)));
elements = elements.concat(siblings);
return elements;
}
};

HTML example declaration.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<script type="text/javascript"
src="../App_Scripts/jQuery/jQuery-1.2.3.js"></script>
<!-- Utils.js - contain jQuery.create - plug-in -->
<script type="text/javascript"
src="../App_Scripts/Utils/Utils.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Create new element typeof DIV
var o = $.create('div',
{'id':'wrapper-header',
'class':'header'}, ['Hello world!!!']);

// Append object o
$('#wrapper').append($(o));
});
</script>
</head>
<body>

<div id="wrapper"></div>

</body>
</html>
תגים:, , , ,

Comments

# TrackBack said:
Sunday, August 24, 2008 8:33 AM
# JEDI » Blog Archive » Jquery Create: Clean way of creating DOM Elements instead of string concatenation said:

Pingback from  JEDI  &raquo; Blog Archive   &raquo; Jquery Create: Clean way of creating DOM Elements instead of string concatenation

Friday, October 10, 2008 9:30 AM
# TrackBack said:

Pingback from  

Friday, October 10, 2008 10:01 PM
# Rick said:

I made some adjustment to your plugin to make it more crossbrowser. E.g. IE does not allow to create input elements with attributes at runtime. Changes can be found here:

www.internetschoon.nl/.../Create-elements-via-DOM-and-jQuery.htm

Tuesday, November 11, 2008 2:45 PM
# eeeeeeeee said:

eeeeeeee

Monday, January 05, 2009 1:32 PM
# kelly said:

Or you could just do the same thing with the normal library by doing

jQuery(" <div />" )

             .attr( "id", "wrapper-header")

             .addClass( "header" )

             .html( "hello world")

             .appendTo( jQuery( "#wrapper" ) );

Tuesday, January 27, 2009 7:49 AM
# Jon Davis said:

I don't get it. $('#wrapper").append('<div id="wrapper-header" class="header">hellow world</div>');

Monday, February 09, 2009 12:18 AM
# Creative with WP Greet Box | burningCat said:

Pingback from  Creative with WP Greet Box | burningCat

Wednesday, April 29, 2009 11:36 PM
# Fabio said:

how to create an element out of expressions like: "div#1.fabio" would become: <div id="1" class="fabio"></div>

Friday, July 24, 2009 3:59 AM
# MooTools-Like Element Creation in jQuery - Programming Blog said:

Pingback from  MooTools-Like Element Creation in jQuery - Programming Blog

Monday, October 05, 2009 5:25 PM
# Barker Design | Graphic & Web Development » Blog Archive » MooTools-Like Element Creation in jQuery said:

Pingback from  Barker Design | Graphic &amp; Web Development                    &raquo; Blog Archive                 &raquo; MooTools-Like Element Creation in jQuery

Monday, October 05, 2009 11:12 PM
# MooTools-Like Element Creation in jQuery - Programming Blog said:

Pingback from  MooTools-Like Element Creation in jQuery - Programming Blog

Tuesday, October 06, 2009 12:51 AM
# Barker Design | Graphic & Web Development » Blog Archive » MooTools-Like Element Creation in jQuery said:

Pingback from  Barker Design | Graphic &amp; Web Development                    &raquo; Blog Archive                 &raquo; MooTools-Like Element Creation in jQuery

Sunday, October 18, 2009 4:07 PM
# MooTools-Like Element Creation in jQuery said:

Pingback from  MooTools-Like Element Creation in jQuery

Friday, October 23, 2009 5:33 AM
# sander said:

how can i create several objects in each other?

like this for example:

var o = $.create('div', {'id':'tooltip'}, [

$.create('h1', {'id':'title'}, [ 'text']),

$.create('p', {'id':'tekst'}, [ 'text']])

]);

$(this).append($(o));

it gives an error right now (Node cannot be inserted at the specified point in the hierarchy)

plug in is great. really clean!

thnx

Tuesday, November 17, 2009 4:34 PM
# Basil Goldman said:

$.create('div', {  }, [ -- this is HTML or TEXT only -- ] );

But you can try this (See below)

var el = jQuery(

$.create('div', {}, [])

).append(

$.create('span',{}, ['Hello']),

$.create('a',{}, ['Welcome'])

);

$('#wrapper').append($(el));

Wednesday, December 02, 2009 11:15 AM
# dfgc said:

function ControlHolder(id, control) {

this.span = $.create("span", {"class":"xyz", "id":id}, "Group");

this.legend = $.create("legend", {}, this.span);

this.fieldset = $.create("fieldset",{}, this.legend);

$(this.fieldset).append(control);

return this.fieldset;

}

You _CAN_ nest elements, however what I cannot seem to do is add a function.. any suggestions?

The following code does not work

var myFunction = function(){ alert(1) };

$.create("span", {

 "onclick": myFunction

} ,"Click Me")

Wednesday, December 02, 2009 10:50 PM
# Basil Goldman said:

It's work fine man, please correct your syntax. (See below...)

var myFunction = function() { alert("OK"); }

var obj = $.create('a', { 'onclick' : 'myFunction()' } ,['Click Me']);

$(put_your_element_here).append(obj);

But I think you don't need to set the "callers / functions" on elements like this sample. You have a rich and full functionality from jQuery prototype.

Just think's

================================================

Basil

Best regards

Sunday, December 20, 2009 8:30 PM
# Alex Koti said:

observation: IE[s] allways require 3th argument.

expected object in line 31:

children = jQuery.create.apply(null, children);

Sunday, March 21, 2010 1:47 AM

Leave a Comment

(required) 
(required) 
(optional)
(required) 

Enter the numbers above: