javascript - 使用javascript创建一个div onclick

Question

当用户点击另一个 div 时，我使用纯 JavaScript 创建一个新的 div 元素。这是我的 JSFiddle。没有报告错误，但没有创建 div。请帮忙。非常感谢!

基本上，这就是我现在拥有的:

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/

已解决:

这是我的最终代码:

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

需要在回调函数中添加创建div的逻辑

  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
    }
};

看这个例子

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

我建议您使用 addEventListener 方法将事件发送到 DOM 元素。此外，避免通过 JavaScript 应用 CSS 样式；更好的解决方案是添加类名并为其创建 CSS 规则；

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);