使用javascript創建div onclick

我使用純JavaScript創建一個新的div元素，當用戶點擊另一個div時。這是我的JSFiddle。沒有錯誤被報告，但div沒有被創建。請幫忙。非常感謝！使用javascript創建div onclick

基本上，這就是我現在所擁有的：

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

來源

2014-02-12 user3302300

在Chrome中打開此提琴，然後點擊ctrl + shift + i。有一個錯誤：Uncaught TypeError：Object＃ has no method'getElementByID' –

此外，創建元素還不夠，您必須使用insertBefore或類似函數將其插入到DOM中。 .javascriptkit.com/javatutors/dom2.shtml –

div將被創建（假設你修復了'ok'的範圍和'getElementByID'中的錯字），但你永遠不會將它附加到任何東西上。 – j08691

您需要添加邏輯在這個例子中

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

我會在回調函數中創建的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 
    } 
};

看建議您使用addEven tListener方法將事件發送到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);

來源

2014-02-12 15:36:49 ppoliani

不應該是'document.body'嗎？代碼是不適合我的。 –

@DanielLisik是的，我沒有注意到;看看更新的答案 – ppoliani

現在它是完美的。 +1！ –

你ok變量是本地的你的onclick功能。只需將var聲明onclick之外：

var ok = false; 

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

...

此外，作爲j08691評論這個答案：這是getElementById，不getElementByID（以ID小寫字母d）。

來源

2014-02-12 15:36:34

啊，很好看！ –

使用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/

來源

2014-02-12 15:36:38 spassvogel

我看到你做了什麼，但你如何確定自己的立場？ – user3302300

你沒有具體說明，但你可以在ppoliani的答案中看到如何做到這一點。 – spassvogel

您剛剛創建一個div元素上的某個地方被使用document.createElement（「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'。

來源

2014-02-12 15:50:53

使用javascript創建div onclick

回答

相關問題