尝试使用Maps API创建DOM元素

Question

我正在尝试使用Google Maps API在信息框内部创建一个DOM元素，但我期望找到我的元素，浏览器不会渲染元素，而是关于该对象的纯文本。我怀疑这与我混合使用JS和HTML的方式有关，因为如果我只是包含Javascript（没有HTML），元素就会毫无问题地显示出来。

信息框的内容变量如下所示：

var content = '<strong>Title</strong>' + document.createElement('button');

渲染的内容如下所示：

Title [object HTMLButtonElement]

Answer 1

  

我怀疑这与我混合JS和HTML

的方式有关

完全。

var content = '<strong>Title</strong>' + document.createElement('button');

您的变量首先被赋予一个字符串值 - 然后您尝试使用+运算符向其附加内容，该运算符代表此上下文中的字符串连接。由于HTML元素在这里是“虚构的”，因此必须将其转换为字符串才能执行操作。当你将一个HTML元素隐式“强制转换”为一个字符串时，浏览器就会像[object HTMLButtonElement]那样（不同浏览器之间的确切文本会有所不同）。

使用DOM方法创建所有元素（strong的createElement，以及其中的文本内容的createTextNode） - 或者如果在您的上下文中可以使用innerHTML，则使用{{1}}。