Tutorial Lesson 2: Element Creation

Just as modern standards-compliant browsers provide access to elements already on the page, they also allow us to create new elements. Jude builds on this ability, again, with the E() function.

Creating a simple, blank Jude Element

Creating a new element is done with the same tool as referencing an element: E(). What gets passed to E() is what determines whether you want to create a new element or simply reference an already-existent one.

jude.onload = function() {

    myElm = E( "<DIV>" ) ;

};

This example creates a new <div> element. Of course, the element contains nothing and is very useless, but nonetheless, it now exists. Note that the argument passed to E() is an HTML tag inside quotes. This is what tells E() to create a new element instead of getting a reference to an already-existent one. The angle brackets (< and >) around the tag name show that a new <div> element is what we want. Without the brackets, E() would look for an element in the document called "DIV".

Creating a Useful Jude Element

To give our element position, size, and contents, we can pass those arguments into E(), respectively.

jude.onload = function() {

    myElm = E( "<DIV>", 20, 20, 100, 100, "Hello World!" ) ;

};

Arguments 2 and 3 are the X and Y coordinates for the new element's position, respectively. Arguments 4 and 5 are the new element's width and height, respectively. And the 6th argument is the HTML to write to the new element.

A slightly different case is the creation of an image element. Since it has no HTML contents, the 6th argument is the image source, like so:

jude.onload = function() {

    myElm = E( "<IMG>", 20, 20, 100, 100, "images/myimage.gif" ) ;

};

Similarly, the 6th argument is used for the URL for an IFrame element, like so:

myElm = E( "<IFRAME>", 20, 20, 400, 300, "http://www.google.com/" ) ;

Now our element has some visible qualities, but it still isn't a part of the document. It's floating in Webspace, if you will. Until we attach our element to the document (or to another element), it will not be visible on the page.

The following are two different ways of appending the element to the body of the document or to another element. Both ways accomplish exactly the same thing, so you can choose which one you want to use.

All at Once

jude.onload = function() {

    myElm1 = E( "<DIV>", 20, 20, 100, 100, "Hello World!" ).appendTo( document.body ) ;
    
    // or simply...
    myElm2 = E( "<DIV>", 20, 20, 100, 100, "Hello World!" ).appendTo() ;
    // document.body is the default for appendTo()

};

Separate Statements

jude.onload = function() {

    myElm1 = E( "<DIV>", 20, 20, 100, 100, "Hello World!" ) ;
    document.body.appendChild( myElm1 ) ;

    // or...
    myElm2 = E( "<DIV>", 20, 20, 100, 100, "Hello World!" ) ;
    myElm2.appendTo( document.body ) ;

};

The first way ("All at Once") is nice if you want to create and append in one fell swoop. Sometimes, though, you want to do a lot of manipulations to the new element before you append it. In that case, the second way ("Separate Statements") is better.

A word of caution: some browsers choke if you append an image element before its source has been specified. So you must specify the image file before you append the element. You can even use the "All at Once" appending method above as long as you specify the source as the 6th argument of E().

Advanced Element Creation

There is one thing we haven't yet discussed about element creation: the styling argument. A 7th argument can be passed to E() that specifies the new element's styling. This argument is a somewhat complex, so it deserves a good explanation.

The styling argument has three different-but-related uses. Here are three examples:

Specifying Positioning

jude.onload = function() {

    myElm = E( "<DIV>", 20, 20, 100, 100, "Hello World!", "relative" ).appendTo() ;

};

This example gives the new element relative positioning, so when it's appended to the document, it's placement will be relative to where it was appended. For instance, if you have a page already full of text, and you append a new element using the code above, the element will be placed 20 pixels to the right of and 20 pixels down from the last bit of text on the page.

You can also specify "absolute" for this argument, but that happens to be the default, so it's unnecessary to do so.

Associating a Style Class

<style type="text/css">
    .my-class {
        position   : absolute ;
        background : #ccc ;
        border     : 1px solid #000 ;
    }
</style>

<script type="text/javascript src="lib/jude.js"></script>
<script type="text/javascript">

    jude.onload = function() {

        myElm = E( "<DIV>", 20, 20, 100, 100, "Hello World!", ".my-class" ).appendTo() ;

    };

</script>

Here we specified a style class to be associated with the new element. This would be the same as writing the class into the <div> like this: <div class="my-class">Hello World!</div>. Notice that there is a preceding period. This must be present in order to specify a style class association.

Passing an Entire Style Rule

jude.onload = function() {

    var myElmStyle = "position:absolute; background:#ccc; border:1px solid #000" ;
    myElm = E( "<DIV>", 20, 20, 100, 100, "Hello World!", myElmStyle ).appendTo() ;

};

With this example, we specified the same styling without using a style class. We just wrote the style rule as we normally would in a style definition into a string and passed it as the 7th argument. Do not include any curly braces around the rule.

Good Job

Well, you made it through this long lesson. If you understand all that's here, then it's a downhill run from now on. The remaining lessons are relatively simple, and I'm confident that you'll soon be writing some killer DHTML apps.

Next Lesson: Event Listeners »