appendChild不能在Google地圖中使用

Question

爲什麼元素A不可見？看來appendChild（）函數被忽略。我只能看到B元素。 （元素是可見的，如果我把它控制內部）:(

var a = document.createElement('A'); 
a.style.width = '50px'; 
a.style.height = '50px'; 
a.style.cursor = 'pointer'; 
a.style.backgroundColor = 'rgba(10,20,30,1.0)'; 

var b = document.createElement('B'); 
b.style.width = '200px'; 
b.style.height = '200px'; 
b.style.backgroundColor = 'rgba(230,230,230,0.6)'; 

b.appendChild(a); 
map.controls[google.maps.ControlPosition.LEFT].push(b); 

Answer 1

你的問題是，你必須同時顯示在block水平

var a = document.createElement('A'); 
a.style.width = '50px'; 
a.style.height = '50px'; 
a.style.cursor = 'pointer'; 
a.style.backgroundColor = 'rgba(10,20,30,1.0)'; 
a.style.display = 'block'; //style block level 

var b = document.createElement('B'); 
b.style.width = '200px'; 
b.style.height = '200px'; 
b.style.backgroundColor = 'rgba(230,230,230,0.6)'; 
b.style.border = '1px solid black'; 
b.style.display = 'block'; //style block level 

document.body.appendChild(b); 
b.appendChild(a); 

https://jsfiddle.net/9rnzbuqh/

Answer 2

<a>元素是默認的內聯元素，並且您不能設置內聯元素的寬度或高度。您必須將其display更改爲block：

var a = document.createElement('A'); 
a.style.width = '50px'; 
a.style.height = '50px'; 
a.style.cursor = 'pointer'; 
a.style.backgroundColor = 'rgba(10,20,30,1.0)'; 
a.style.display = 'block'; 

var b = document.createElement('B'); 
b.style.width = '200px'; 
b.style.height = '200px'; 
b.style.backgroundColor = 'rgba(230,230,230,0.6)'; 
b.style.display = 'block'; 

b.appendChild(a); 
map.controls[google.maps.ControlPosition.LEFT].push(b); 

Answer 3

我想清楚我在做什麼。它沒有設置顯示樣式，但我不知道爲什麼。

https://jsfiddle.net/9rnzbuqh/78/

var c = document.createElement('div'); 
c.style.height = '263px'; 
c.style.width = '350px'; 
c.style.marginLeft = '0px'; 
c.style.marginTop = '0px'; 
c.style.backgroundImage = "url(https://upload.wikimedia.org/wikipedia/en/5/5f/TomandJerryTitleCardc.jpg)"; 


var d = document.createElement('div'); 
d.style.background = 'rgba(230,230,230,0.6)'; 
d.style.paddingBottom = '70px'; 
d.style.paddingLeft = '40px'; 
d.style.paddingRight = '40px'; 
d.appendChild(c); 
document.body.appendChild(d); 

和

div { 
    width:400px; 
}