Create DOM Objects with Attributes and Children with One Simple JavaScript Function

Date Published: 28/02/2009 21:55

Creating elements in the DOM from JavaScript can often be fiddly and lead to large unwieldy script files. To combat this I have written a small cross browser function which takes all the details of a new DOM element and returns the object. The function takes the node name, its attributes and either its text content or child nodes.

The makeNode Function

function makeNode(name, attrs, content){
   var node = document.createElement(name);
   if (attrs.length > 0){
      for (i in attrs){
         if (attrs[i][0] == "class"){
            node.className = attrs[i][1];
         }
         else if (attrs[i][0] == "enctype"){
            node.encoding = attrs[i][1];
         }
         else {
            node.setAttribute(attrs[i][0], attrs[i][1]);
         }
      }
   }
   if (content != undefined){
      if (content.constructor.toString().indexOf("Array") != -1){
         for (i in content){
            node.appendChild(content[i]);
         }
      }
      else {
         node.innerHTML = content;
      }
   }
   return node;
}

Simply copy this function and paste it into your script file above where you need to create some DOM elements.

Using the makeNode Function

var new_node = makeNode("node_name", attribute_array, child_array/"inner_text_string");

To use the function above simply create a variable and then make a function call containing the attributes and children grouped into arrays. To add attributes to the new node define an array which contains an array for each attribute. Set the first element in the sub arrays to the name of the attribute you wish to assign and then set the second element to the value you wish to assign. To add content or children to your new node either define an array containing the desired children or a string with the inner text. If you wanted to create a paragraph element with an ID of "para1" and a class "content_para" which contained the"Hello World" as inner text you would use the following call.

var para = makeNode("p", [["id", "para1"], ["class", "content_para"]], "Hello World");

This would be instead of a much longer definition such as...

var para = document.createElement("p");
para.id = "para1";
para.className = "content_para";
para.innerHTML = "Hello World";

It may seem like a simple addition to your code but it can not only save file size but also saves you from typing hundreds of unnecessary lines.

The Function in Practice

A lot of sites, especially those who implement a lot of Ajax, create forms using the DOM which can add up to a lot of lines. Heres a small sample script using the makeNode function which demonstrates just how much time and space you can save when creating a simple form to submit comments.

var c_form = document.createElement("form");
c_form.method = "post";
c_form.action = "post.php";
var name_l = document.createElement("label");
name_l.htmlFor = "txtName";
name_l.innerHTML = "Your Name:";
var name_f = document.createElement("input");
name_f.type = "text";
name_f.name = "txtName";
name_f.id = "txtName";
var email_l = document.createElement("label");
email_l.htmlFor = "txtEmail";
email_l.innerHTML = "Your Email Address:";
var email_f = document.createElement("input");
email_f.type = "text";
email_f.name = "txtEmail";
email_f.id = "txtEmail";
var comment_l = document.createElement("label");
comment_l.htmlFor = "txtComment";
comment_l.innerHTML = "Your Comment:";
var comment_f = document.createElement("textarea");
comment_f.name = "txtComment";
comment_f.id = "txtComment";
comment_f.rows = "3";
comment_f.cols = "30";
var submit_b = document.createElement("input");
submit_b.type = "submit";
submit_b.name = "cmdSubmit";
submit_b.value = "Submit Comment";
c_form.appendChild(name_l);
c_form.appendChild(name_f);
c_form.appendChild(email_l);
c_form.appendChild(email_f);
c_form.appendChild(comment_l);
c_form.appendChild(comment_f);
c_form.appendChild(submit_b);

The above code snippet would be replace with the following when using the makeNode function.

var name_l = makeNode("label", [["for", "txtName"]], "Your Name:");
var name_f = makeNode("input", [["type", "text"], ["name", "txtName"], ["id", "txtName"]]);
var email_l = makeNode("label", [["for", "txtEmail"]], "Your Email Address:");
var email_f = makeNode("input", [["type", "text"], ["name", "txtEmail"], ["id", "txtEmail"]]);
var comment_l = makeNode("label", [["for", "txtComment"]], "Your Comment:");
var comment_f = makeNode("textarea", [["name", "txtComment"], ["id", "txtComment"], ["rows", "3"], ["cols", "30"]]);
var submit_b = makeNode("input", [["type", "submit"], ["name", "cmdSubmit"], ["value", "Submit Comment"]]);
var c_form = makeNode("form", [["method", "post"], ["action", "post.php"]], [name_l, name_f, email_l, email_f, comment_l, comment_f, submit_b]);

Using the make node function saves a massive 401 characters on this small piece of code alone, thats a massive 34%. Those statistics alone justify using it, especially on large JavaScript intensive pages. There of course other ways of achieving a similar effect such as JavaScript libraries like Dojo, YUI and jQuery but I feel unless you are going to use a large amount of their features you are always better off sculpting your code to better match your individual project.

Conclusion

This is just one of many methods you can use to streamline your JavaScript files making them more suitable for slower connections. If you want more information on how to shrink your script file sizes you may want to look at my section about minifying JavaScript on the fly in my article discussing Apache optimisation techniques here (http://www.dev-explorer.com/articles/apache-optimisation). Minification is another proven method of improving page load times for websites using JavaScript. If you have any trouble with what I have discussed in this article feel free to comment below and I will be sure to assist you the best I can.

Comments

Sorry comments are currently disabled for maintenence

5 Most Recent Articles

Manually Triggering Events in ASP.NET from JavaScript

A quick guide for ASP.NET developers on how to manually trigger ASP.NET events from JavaScript.

Advanced Use of MySQL Stored Procedures

An article for users of MySQL databases describing how they can use advanced stored procedures to improve efficiently in their applications.

Using MySQL Stored Procedures and Extending MySQLi in PHP

A guide for LAMP developers to using stored procedures in MySQL and extending the MySQLi class.

Reading and Writing to Excel Spreadsheets in Python

An introduction to using the xlwt and xlrd modules for python to interact with Microsoft Excel spreadsheets.

Interact with the Web Using Python and the HTTP Library

This is an introduction to making HTTP requests from a python script/application using httplib.

Sponsors