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

Answer 2

您的ok变量是onclick函数的本地变量。只需将var声明移到onclick：

之外

var ok = false;

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

...

此外，j08691对此答案发表了评论：它是getElementById，而不是getElementByID（ID中的小写d）。

Answer 3

使用appendChild将其添加到DOM中的某个位置。例如：

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

    var div = document.createElement('div');
    div.style.height = "200px";
    div.style.backgroundColor = "black";
    document.body.appendChild(div);
}

http://jsfiddle.net/RypAK/

Answer 4

您刚刚通过document.createElement（'div'）在云上的某处创建了div元素，但您从未将其附加到您想要该div元素的元素。因此，您必须将其作为某个父元素的子元素追加。我们来看看这个例子

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

我希望这会有所帮助。

P.S。作为最佳做法并避免歧义，当您创建变量时，我建议不要使用名称“div”。

使用javascript创建div onclick

4 个答案: