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