appendChild 在谷歌地图中不起作用答案

【问题标题】：appendChild not working in google mapsappendChild 在谷歌地图中不起作用
【发布时间】：2016-09-27 21:35:30
【问题描述】：

为什么元素 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);

【问题讨论】：

标签： javascript appendchild

【解决方案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/

【讨论】：

非常感谢你，米奇！ :)

【解决方案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);

【讨论】：

这与我几分钟前发布的答案有何不同？

【解决方案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;
}

【讨论】：