在 JS 中将 div 附加为字符串（？）

Question

我正在使用 Google Maps API，并尝试在单击标记时显示“卡片”（与工具提示/信息框相对）。我跟着this 让卡片出现。但是，此人使用的方法是附加一个巨大的字符串，即白盒的 html，其中所有链接/信息都硬编码到此字符串中。

我正在尝试更改此设置，以便它可以动态插入所需的信息（我已删除卡的代码，因此单击标记时它仅显示一个灰色框，您可以看到代码here )。

重要的代码是：`

google.maps.event.addDomListener(marker, 'click', function() {

    // Prevents card from being added more than once (i.e. when page is resized and google maps re-renders)
    if ( $( ".place-card" ).length === 0 ) {

      var rootDiv = document.createElement('div');
      rootDiv.style = ('position', 'absolute');
      rootDiv.style = ('right', '0px');
      rootDiv.style = ('top', '0px');

      var secondDiv = document.createElement('div');
      secondDiv.style = ('margin', '10px');
      secondDiv.style = ('padding', '1px');
      secondDiv.style = ('-webkit-box-shadow', 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px');
      secondDiv.style = ('box-shadow', 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px');
      secondDiv.style = ('border-radius', '2px');
      secondDiv.style = ('background-color', 'white');
      secondDiv.style = ('width', '200px');
      secondDiv.style = ('height', '150px');


      rootDiv.appendChild(secondDiv);

      // this does not work
      // $(".gm-style").append(rootDiv);

      // this works
      $(".gm-style").append('<div style="position: absolute; right: 0px; top: 0px;"><div style="margin: 10px; padding: 1px; -webkit-box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; box-shadow: rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px; border-radius: 2px; background-color: white; width: 200px; height: 150px"></div></div>');
    }
  });

（您可以看到我正在尝试用实际的 div 替换 str2...我也尝试过，但没有调用 String()，这也不起作用）。 我想知道是否有比简单地将字符串附加在一起以使这张卡片出现更好的方法。

另外，如果有人可以解释 $(".gm-style") 的作用，那将是很可爱的。 （经过大量谷歌搜索后，我的理解是它是 document.getElementById 的替代品，但 .gm-style 是类名......我尝试的任何替代“get___by___”函数都会导致错误）。

谢谢！

Answer 1

可以将元素的 HTML 代码作为字符串获取，但这毫无意义。附加字符串只会重新创建元素。

只需附加您拥有的元素：

$(".gm-style").append(rootDiv);

您设置样式的代码都是错误的。像('position', 'absolute') 这样的表达式使用逗号表达式，所以它的值就是字符串'absolute'。将该字符串分配给样式不起作用，您将使用样式对象的属性：

var rootDiv = document.createElement('div');
rootDiv.style.position = 'absolute';
rootDiv.style.right = '0px';
rootDiv.style.top = '0px';

var secondDiv = document.createElement('div');
secondDiv.style.margin = '10px';
secondDiv.style.padding = '1px';
secondDiv.style.webkitBoxShadow = 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px';
secondDiv.style.boxShadow = 'rgba(0, 0, 0, 0.298039) 0px 1px 4px -1px';
secondDiv.style.borderRadius = '2px';
secondDiv.style.backgroundColor = 'white';
secondDiv.style.width = '200px';
secondDiv.style.height = '150px';

但是，我建议您将 CSS 放在样式表中，而不是将所有样式直接添加到元素中。

Answer 2

您可以通过获取元素outerHTML 将元素转换为字符串。

$(".gm-style").append(rootDiv.outerHTML);

顺便说一句，如果您使用 jQuery，为什么要将其附加为字符串？使用

$(".gm-style").append(rootDiv);

会起作用的。