Dojo: Creating image using dojo script

Dojo provides numerous functionality like:
1.Easy and smooth creation of different widget such as dojo grid, forms, datapicker, calendar etc.
2.Prolific method of interacting with html elements.
3.Achievement of ajax functionality with far more less code.
In this article I am going to discuss how to create an image element using dojo script and attach that image to certain html element.
In order to achieve functionality on loading the page, you will need to use dojo.addOnLoad() method. This takes the following form.

<script>
    dojo.addOnLoad(function(){
        alert(‘called on load of page’);
});
</script>

Now in the next few lines we are going to put the actual functionality.

<script>
    dojo.addOnLoad(function(){
        dojo.extend(dojo.NodeList, {
            addImage: function() {
            
            return this;
        }
    });
});
</script>

The most important things here are extending dojo.NodeList and then adding addImage function that initially has nothing, but we are going to add real functionality to it later on. This addImage method will contain the functionality for creating an image.
The question here however is, why we extend NodeList.
Well this is pretty simple. If you want to achieve functionality like;
dojo.query(‘input[id=name]’).addImage().removeClass(‘complusory_image’);
you will need to extend you method from NodeList. Doing so will enable you to access entire NodeList method in the way above.

Don’t worry about dojo.query() method, I will explain it shortly for you.
Now lets put the real script for creating img tag in our addImage method.

var img = dojo.doc.createElement('img');
dojo.attr(img, {
    src: "path/to/imges/img.png",
    alt: "This is my simple image",
    style: {cursor: "pointer"}
});

In the first line we have created img tag. In the second line we have attached different attributes to the img. You can define as many valid attributes associated with img tag as you wish.

The code in the addImage function looks, however, a bit different. See the following code.

<script>
dojo.addOnLoad(function(){
    dojo.extend(NodeList, {
            addImage: function(args){
                this.forEach(function(n){
                    var img = dojo.doc.createElement('img');
                    dojo.attr(img, {
                        src: "path/to/imges/img.png",
                        alt: "This is my simple image",
                        style: {cursor: "pointer"}
                    });
                    dojo.place(img, n, "after");
                });
            return this;
        }
    });
});
</script>

The function for addImage contain args as parameter. This means that the image tag created can be attached to as many html elements as you like. In the forEach loop we create image tag and attach at to the arguments passed to it.
Now in the dojo.addOnLoad function, at the end, write the following script.

dojo.query(‘input[id=name]’).addImage();

The above script states that attach an image to input tag having id equals to name.
It you want to attach element to all input tags on your page, write

dojo.query(‘input’).addImage(); 

The final script on my page look like this.

<script>
dojo.addOnLoad(function(){
    dojo.extend(NodeList, {
            addImage: function(args){
                this.forEach(function(n){
                    var img = dojo.doc.createElement('img');
                    dojo.attr(img, {
                        src: "path/to/imges/img.png",
                        alt: "This is my simple image",
                        style: {cursor: "pointer"}
                    });
                    dojo.place(img, n, "after");
                });
            return this;
        }
    });
    dojo.query("input[id=name]").addImage();
});
</script>