0
function createDiv(nameId,width,height,color)
{
    try
    {
        // Initialize And Create Div
        if(document.createElement('div'))
        {
            // document.write("<br>Create Div Success");
            if((nameId.length!=0) && (width>0) &&(height>0) && (color.length!=0))
            {
                //creating div
                var divCreate = document.createElement('div');

                divCreate.id=nameId;
                document.getElementById(nameId).width = width;
                document.getElementById(nameId).height = height;
                document.getElementById(nameId).background = color;
                document.getElementById(nameId).backgroundColor = "Red";
                document.body.appendChild(divCreate);
                document.write(" <br>Create Div Success And Added To Body");

                // document.write(" <br>Create Div Success And Added To Body");
            }
            else
            {
                //     document.write("<br>All Field Value Required");
            }
        }
        else
        {
            document.write("<br>Unable To Create Div");
        }
    }
    catch(e)
    {
        document.write("<br>"+e);
    }
}

document.getElementById() is getting Null. I am trying to create a DIV using javascript and assigning some width/height and color to it, but its not working. However, if I use the code below the div gets created but it's not visible on the screen. And if I use the function createDiv() it does not work.

divCreate.id=nameId;
divCreate.width = width;
divCreate.height = height;
divCreate.background = color;
divCreate.backgroundColor = "Red";
document.body.appendChild(divCreate);
timss
  • 9,982
  • 4
  • 34
  • 56
Siddharth
  • 545
  • 2
  • 7
  • 24
  • Read up here: http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice – elclanrs May 16 '13 at 23:01

3 Answers3

1

createElement only creates the element.. you need to first add the element to the document for it to be found..

Try to add the append earlier and that should work:

      //creating div
      var divCreate = document.createElement('div');

      divCreate.id=nameId;
      document.body.appendChild(divCreate); <-----------------------
      document.getElementById(nameId).width = width;
      document.getElementById(nameId).height = height;
      document.getElementById(nameId).background = color;
      document.getElementById(nameId).backgroundColor = "Red";

      document.write(" <br>Create Div Success And Added To Body");
Dory Zidon
  • 10,497
  • 2
  • 25
  • 39
  • 1
    Technically correct, though it is still better to just refer to `divCreate` instead of re-fetching it from the DOM for every assignment with `gEBI` – Dennis May 16 '13 at 23:13
  • very true Dennis. you have the object so just use it, rather than take the scenic walk down the dom ;) – Dory Zidon May 16 '13 at 23:35
0

Appears you are trying to reference it before you append it.

Jason
  • 309
  • 2
  • 14
  • but i am not able to see the div in the browser – Siddharth May 16 '13 at 23:17
0

There a few items that need to be improved/fixed in your code:

  • You already have the object, so you dont need to use the getElementById function to get it (Also, you tried to get object before adding it to the body)
  • You need to use the .style to access the css properties of the object
  • Dont use the document.write function to print a status, because it will rewrite the page if the page already was loaded.

Here is the updated code:

//creating div
      var divCreate = document.createElement('div');

      divCreate.id=nameId;
      //to access the width and other css properties, you need to use the style
      divCreate.style.width = width;
      divCreate.style.height = height;
      divCreate.style.background = color;
      divCreate.style.backgroundColor = "Red";
      document.body.appendChild(divCreate);
fmodos
  • 4,472
  • 1
  • 16
  • 17