style.display = 'block' not working in javascript on a div

Question

I am trying to Add a DIV which has a image source in it to an HTML. and after i am trying to change the property of above added DIV. But i am not able to do so. The DIV is showing up in the Browser Development tools when checked. The Error i am getting is "Cannot read property 'style' of null". Below is my code. Thanks in advance.

ajaxLoaddiv='<div class="LoadingImage" alt="example" style="display: none"> <img src="css/ajax-loader.gif"></div>';
$(ajaxLoaddiv).appendTo(attachPoint);
document.getElementById("LoadingImage").style.display = 'block'; 

attachpoint is a reference in the html which i got by.

var attachpoint=document.querySelector('.buttonAttachPoint');

Answer 1

You gave it class='LoadingImage' , but not id='LoadingImage' and later attempt to retrieve it with getElementById("LoadingImage") . Just add the id attribute.

ajaxLoaddiv='<div id="LoadingImage" class="LoadingImage" alt="example" style="display: none"> <img src="css/ajax-loader.gif"></div>';
//--------------^^^^^^^^^^^^^^^^^^^

But if you are already using jQuery, you might as well use it here too.

$('#LoadingImage').css('display', 'block');

...And could therefore more easily access it by class (assuming this is the only element with the class LoadingImage ) if you prefer:

$('.LoadingImage').css('display', 'block');

Answer 2

document.getElementById gets the element by ID, not class?

var ajaxLoaddiv = $('<div />', {'class': 'LoadingImage',
                                 alt   : 'example',
                                 style : 'display: none'
                                }),
    img = $('<img />', {src: 'css/ajax-loader.gif'});

ajaxLoaddiv.append(img).appendTo(attachPoint);
ajaxLoaddiv.show();

Answer 3

use:

$("#LoadingImage").css({"display": "block"});

If you want a jQuery solution :)

Also, you used a class name instead of the element's ID