In one of my recent posts, I attempted to explain and explore the document object model (DOM) a little bit, in order to help you understand how it can be manipulated. In this series of posts, I will explain how to use javascript to work with the DOM. However, it is important to note that the functions we’ll be using inside of this tutorial are defined by the DOM, and can actually be used in some form or another in any programming language that supports XML. I know for a fact that these same functions are also available in PHP, VBScript and Java. I’m certain that they are available in a host of other languages, as well.
To begin with, I should note that the old way of adding code to your HTML files with javascript is basically dead. In the past, if you wanted to add anything to your HTML file with javascript, you probably would have used the document.write function. However, with the push toward valid, XML-based code, document.write is an endangered, proprietary function that is well on its way out. The problem with the document.write function is that it breaks the DOM. When information is pushed into the document with that function, it can be done so without any structure whatsoever, which makes it less reliable, less secure and more apt to be misinterpreted by various browsers.
However, the DOM functions allow us to push information into the document in a more structured manner, making it much more likely that the browser will interpret it properly.
There are a handful of DOM functions we will explore in this tutorial. They are: createElement, createTextNode, appendChild, insertBefore, replaceChild and removeChild. This post will deal with the “createElement” function.
createElement
Let’s start with the createElement function. Basically, this function does exactly what it says. It creates an element to be inserted into the DOM. Initially, when creating an element, it doesn’t really go anywhere. It just kind of floats out there in cyberspace, until you tell the interpreter where to place that element inside of the DOM. That’s where the insertBefore, appendChild and replaceChild functions come in. We will explore those in a moment.
First, let’s look at some code that creates an element for us.
var myimg = document.createElement("img");
myimg.id = "myimg";
myimg.src = "test.gif";
myimg.alt = "This is a test image";
The code above will create an img tag, then will assign an ID to that image, define the source of the image and set the alt tag. As you can see, we assigned the element we created to a javascript variable called “myimg”. It is extremely important to assign your new element to a variable, otherwise you will not be able to do anything with it. For example, had we not assigned that new element to the myimg variable, we would not have been able to set the alt, the id or the src of that element.
When setting attributes for your elements, you can set any attribute that’s allowed by the DTD. In the case of an XHTML file, the img tag can have any of a number of attributes (the full list can be found in the img tag definition on w3schools). In the case of an XML file, you would have to consult the DTD in order to know which attributes are legal. However, there is a slightly different way of setting attributes when working with an XML file (which we won’t discuss at this juncture, since we are dealing strictly with XHTML for the purposes of this tutorial).
One item of note, however, is that you need to use a slightly different syntax to define CSS attributes for the element. First of all, you cannot simply assign a CSS class to the element, because “class” is a reserved word within javascript. Therefore, you have to use the term “className” instead. Therfore, the code would look something like: myimg.className = “myclass” instead of simply: myimg.class = “myclass”. Further, you cannot simply assign any of the normal inline style definitions to your element. For instance, myimg.display = “block” will not set the display property of your element to block. Instead, when defining inline style attributes, you need to preface them with the “style” keyword. Therefore, to set your image as a block-level element, you would need to use: myimg.style.display = “block”, instead.
In the next installment, we will begin exploring how to add your new element into the DOM.
4 Responses
I feel that example is useless, because If you think about it using DOM to create an image it’s more about performance, You could literally load the image while the page is loading, hide the image and use DOM to display the image.
Other then that, createElement can be useful at some point in time depending on the type of script you are needed to make in a certain situation.
I am thank full to you and your knowledge. Thanks a lot. please keep on writing.
Please could you explain the following code for me:
var addEventSimple = function(el, evt, fn) { if (el.addEventListener) { el.addEventListener(evt, fn, false); } else if (el.attachEvent) { el.attachEvent('on' + evt, fn); } }; // alias var addEvent = addEventSimple; // Add/remove/has class functions from http://snipplr.com/view/3561/addclass-removeclass-hasclass/ var hasClass = function(ele,cls) { return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } var addClass = function(ele,cls) { if (!hasClass(ele,cls)) { ele.className += " " + cls; } } var removeClass = function(ele,cls) { if (hasClass(ele,cls)) { var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)'); ele.className = ele.className.replace(reg,' '); } } // getElementsByClass function from ddiaz var getElementsByClass = function(searchClass,node,tag) { var classElements = []; if (!node) { node = document; } if (!tag) { tag = '*'; } var els = node.getElementsByTagName(tag); var elsLen = els.length; var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"); for (i = 0, j = 0; i < elsLen; i++) { if (pattern.test(els[i].className)) { classElements[j] = els[i]; j++; } } return classElements; };Hi Lee,
You have several functions of JavaScript created to add and remove class of specific DOM element. Last function lets you find DOM element by the class. Here is explanation https://developer.mozilla.org/en-US/docs/DOM/element.className