div添加javascript並不顯示

我想添加一個使用javascript的div。該div出現在代碼和chromes開發人員工具中，但未顯示在實際窗口中？div添加javascript並不顯示

爲什麼會發生這種情況，我該如何解決這個問題？

代碼：

<div id='body'> 
    <div id='inner'>div here</div> 
</div> 

<script> 

function add() { 
var inner = document.getElementById('inner'); 

    var div = document.createElement('div'); 
    div.style.height = '300px'; 
    div.style.width = '100px'; 
    div.style.color = 'blue'; 
    inner.appendChild(div); 

} 

add(); 



</script>

來源

2013-12-19 moonshineOutlaw

顏色用於文本，而不是爲背景。請參閱http://jsfiddle.net/er779/3/ – Reinard

您已設置文本color，沒有背景色。所以它就在那裏，只是它沒有內容，所以你看不到它。我假設你的意思是這樣的：

div.style.backgroundColor = 'blue';

來源

2013-12-19 14:20:41 CodingIntrigue

基於這是答案，我建議OP使用檢查器工具來查看DOM來捕捉這類事情。 –

試試這段代碼，它對我有用。

你必須添加的onload（）在body標籤

<html> 
<head> 
<script> 
function add() { 

var inner = document.getElementById('inner'); 
var div = document.createElement("div"); 
div.style.width = "300px"; 
div.style.height = "100px"; 
div.style.background = "blue"; 


inner.appendChild(div); 
} 

</script> 
</head> 

<body onload ="add()"> 

<div id="inner"></div> 

</body> 
</html>

來源

2013-12-19 14:41:05 Fox

div添加javascript並不顯示

回答

相關問題