appendChildがGoogleマップで動作しない

Question

要素Aが表示されないのはなぜですか？ appendChild（）関数は無視されるようです。私はB要素しか見ることができません。 （私はコントロールの内側にそれをプッシュする場合、要素Aが表示されている）:(

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