Domscripter - reduce your DOM-scripting code

• » Overview
• » Usage & params
• » Example
• » Notes

Overview

This script acts as a powerful factory for producing HTML elements en-masse, vastly reducing the amount of code needed compared to native DOM-scripting. In one call to the main function you can create your element as well as add attributes, events, styling add supporting elements such as
s or clears underneath.

Usage & params

For each element you want to create, call domscripter(params), where params is an object of parameter/value pairings from the following:

element (string) - a string representing the name of the element to be created

parent (node reference) - the node that the new element will become a child of

insertBefore (node reference) - a child element of parent that the new element will be inserted in front of. If not passed, new element is inserted as new last child of parent

fadeIn (bool) - if true, element will fade in once created rather than abruptly appear

attrs (object) - object of property/value pairings for giving the element HTML attributes, e.g. {id: 'newDiv', classs: 'someClass'} (note three s's on classs, as 'class' is a reserved word)

evts (object) - object of event/callback pairings to be bound to the new element, e.g. {click: function() { alert('hello, world'); }} (N.B. see notes for why this param is very useful in using Domscripter with IE 6 and 7)

styles (object) - object of property/value CSS pairings that are applied to the new element's style attribute

html (string) - HTML to be inserted into the new node

textNode (string) - if passed, a new text node is created and appended to the new element

label (string) - if passed, and element is an or , a is also created and added to parent

label styles(object) - if label is created, you can style it by passing this object of property/value pairings

options(object) - if new element is a

, you can populate it with a set of s by passing an object of text/value pairings

indexSelected (int) - the index of the option that should start as selected, if element is a and options is passed

clear(string) - either 'left', 'right', 'both' or null. Creates an empty

underneath new element with style='clear: ...' applied to it

br (bool) - if passed, creates and adds a
underneath the new element

^^ top of page

Example

Here's the code for this example, which builds the form and its elements from scratch:

1var form = domscripter({

2     element: 'form',

3     parent: $('#content .scriptDemo').get(0),

4     attrs: {id: 'ds_form'},

5     styles: {

6         border: 'solid 1px #666',

7         padding: 20, width: 350

8     }

9});

10domscripter({

11     element: 'p',

12     parent: form,

13     styles: {

14         marginTop: 0,

15         color: '#557517'

16     },

17     textNode: 'This paragraph and the form below were created on-the-fly by domscripter'

18});

19domscripter({

20     element: 'input',

21     parent: form,

22     evts: {

23         focus: function() { this.value = ''; }

24     },

25     attrs: {

26         type: 'text',

27         value: 'click here to enter value'

28     },

29     label: 'enter a value',

30     labelStyles: {

31         'float': 'left', marginRight: 10

32     },

33     clear: 'both',

34     br: true

35});

36domscripter({

37     element: 'select',

38     parent: form,

39     options: {

40         yes: 0, no: 1, maybe: 2

41     },

42     label: 'Do you speak Russian?',

43     labelStyles: {

44         'float': 'left',

45         marginRight: 10

46     },

47     indexSelected: 1,

48     br: true

49});

50

51domscripter({

52     element: 'button',

53     parent: form,

54     styles: {

55         marginTop: 20

56     },

57     evts: {

58         click: function(e) {

59             e.preventDefault();

60             $('#ds_form').children().not('button').remove();

61             alert('We killed the form!');

62         }

63     },

64     textNode: 'Hide all form fields'

65});

^^ top of page

Notes

Radio button bug in IE6&7

There is a bug in IE 6 & 7 that prevents radio buttons inserted after the DOM has loaded from being checkable. The fix for this is to pass a click event which force checks the clicked radio, at the same time unchecking any previously-checked radio in the same family.

1var oldIE = navigator.appVersion.match(/MSIE (6|7)/);

2domscripter({

3     element: 'input',

4     parent: document.getElementById('someForm'),

5     attrs: {

6         type: 'radio',

7         name: 'radio',

8         value: 'some value'

9     },

10     evts: {

11         click: function() {

12             if (!oldIE) return;

13             var inputs = form.getElementsByTagName('input');

14             for (y=0; y

15                 if (inputs[y].type.toLowerCase() == 'radio' && inputs[y].name == this.name)

16                     inputs[y].checked = false;

17             this.checked = 'checked';

18         }

19     }

20});

Assistant element

Remember, where you need an assistance element as well as the element you're creating, e.g. a label for your form field, this can be generated in the one, same call to domscripter(). See the example above.

Other assistance elements that can be created in the same call as the main element are
, clears and, if you're creating a &l!tselect>, a set of s.

^^ top of page

post new comment

Comments (50)

Okoweb, at 16/09/'10 11:16, said:

Can i do the insertBefore method whith your script?
My english not be good.

Mitya, at 16/09/'10 11:21, said:

Okoweb - yes, see the 3rd parameter in the list of parameters. You would use it like this:

var parentDIV = document.getElementById('someDIV');
domscripter({
       element: 'div',
       parent: parentDIV,
       insertBefore: parentDIV.childNodes[0],
       textNode: 'hello'
});

Okoweb, at 16/09/'10 11:45, said:

I have this structure :

First li
Last li

i would insert a new li enter first and last.
Why can i do that?

Mitya, at 16/09/'10 11:53, said:

Okoweb - I don't know what you mean by '...new li enter first and list'.

Okoweb, at 16/09/'10 12:18, said:

Create and insert a new HTML element enter first li and last li.

Mitya, at 16/09/'10 12:28, said:

"...enter first li and last li" - what do you mean?

Okoweb, at 16/09/'10 12:36, said:

between first li and last li.

Mitya, at 16/09/'10 13:01, said:

var parent = document.getElementById('someDIV');
domscripter({element: 'li', textNode: 'hello', parent: parent, insertBefore: parent.getElementsByTagName('li')[1]});

Okoweb, at 16/09/'10 13:11, said:

Thank !
It's your script compatible IE 6. look here http://javascript.developpez.com/faq/?page=formChamps#ajoutName.

Mitya, at 16/09/'10 13:42, said:

Yes, domscripter is compatible with IE6

Okoweb, at 16/09/'10 14:04, said:

Thank !

good job.

Okoweb, at 18/09/'10 11:30, said:

How to do this with Domscripter?

var rst = xhr.responseXML;
var items=rst.getElementsByTagName('element');
document.getElementById('cadre').options.length=0;
for(var i=0;i

          

Okoweb, at 18/09/'10 11:34, said:

My code is here : http://www.cartographiecm.org/dom/code.js

Thank !

Okoweb, at 18/09/'10 15:49, said:

Big problem with Domscripter on IE6. Input type radio, does'nt not checked. attrs: {name: 'test'}  doesn't work on IE6. If you send form data to php page, $_POST['test'] not present on php page. The problem is here :
if (document.all){  // pour IE
monInput = document.createElement("

"); } else{ // pour FF et autres navigateurs monInput = document.createElement("input"); monInput.name = "nameInput"; } Please read this post http://javascript.developpez.com/faq/?page=formChamps#ajoutName and correct your code. Thank.