using javascript to create a div onclick

Question

I'm using pure JavaScript to create a new div element when the user clicks on another div. Here is my JSFiddle. No errors being reported, but the div is not being created. Please help. Thank you so much!

Basically, this is what I have right now:

document.getElementByID("text").onclick = function () {
    var ok = true;
};

if (ok === true) {
    var div = document.createElement('div');
    div.style.backgroundColor = "black";
    div.style.position = "absolute";
    div.style.left = "50px";
    div.style.top = "50px";
}

<div id="text" style="width:20%;height:30px;background-color:blue;"></div>

http://jsfiddle.net/eMNfd/1/

SOLVED:

Here's my final code:

document.getElementById("text").onclick = function () {
    var div = document.createElement('div');
       div.style.backgroundColor = "black";
       div.style.position = "absolute";
       div.style.left = "50px";
       div.style.top = "50px";
       div.style.height = "10px";
       div.style.width = "10px";

       document.getElementsByTagName('body')[0].appendChild(div);
};

Answer 1

You need to add the logic for creating the div within the callback function

  document.getElementById("text").onclick = function () {

     var ok = true;

     if (ok === true) {
       var div = document.createElement('div');
       div.style.backgroundColor = "black";
       div.style.position = "absolute";
       div.style.left = "50px";
       div.style.top = "50px";

       document.getElementsByTagName('body')[0].appendChild(div); // add it to any dom element you want
    }
};

Look at this example

http://jsfiddle.net/eMNfd/21/

I would recommend you to use the addEventListener method to events to a DOM element. In addition, refrain from applying CSS styles via JavaScript; A better solution is to add a class name and create CSS rules for it;

var addRect = function(){
   var ok = true;

   if (ok === true) {
      var div = document.createElement('div');

      div.className = 'new-rect';       
      document.getElementsByTagName('body')[0].appendChild(div);
   }
}

document.getElementById("text").addEventListener('click', addRect);

Answer 2

Your ok variable is local to your onclick function. Simply move the var declaration outside of the onclick:

var ok = false;

document.getElementById("text").onclick = function () {
    ok = true;
};

...

Also as j08691 commented on this answer: it's getElementById, not getElementByID (lower case d in ID).

Answer 3

You just created a div element somewhere on a cloud by document.createElement('div'), but you never attached it to the element where you want that div element. Therefore, you must append that as a child element of some parent element. Let's take a look at this example

var myElement=getElementById("someID");------this will create a handle on a DOM Element
var myNewElement=docment.createElement("div");----Create a div somewhere on the cloud
myElement.appenchild(myNewElement);-----attach/append that newly created element to the
handle 

I hope this helps.

P.S. As a best practice and to avoid ambiguity, when you create a variable, I recommend not using the name 'div'.