Javascript Google Api无法处理附加的输入

背景：

我正在尝试将谷歌地址搜索添加到在线店面。我没有访问该网站的实际html，但我被允许在页眉、页脚中输入代码，并包括我想要的任何css或js页面。我一开始就让一切顺利。我在标题中有输入，并且能够搜索地址

它创造了：

因此，在我的代码运行后，是时候将输入与其他地址输入一起向下移动了。我想使用javascript根据父ID将此输入附加到一个div中。因此，我使用以下代码执行此操作：

window.onload = function () {
    var input = document.createElement('div');
    input.setAttribute("id", "locationField");
    input.innerHTML = '<input id="autocomplete" placeholder="Enter your address" onfocus="geolocate()" type="text" autocomplete="off">';

    var form = document.getElementById('NameAdd');
    form.insertBefore(input, form.firstChild);
};

这产生了：

现在，我以这种方式包含输入，它不会显示谷歌结果。当检查页面的元素时，一切看起来都很好。我做错了什么？

google.maps.places.Autocomplete构造函数接受元素，而不是元素

这对我很有用：

window.onload=函数{ var inputDiv=document.createElement'div'； inputDiv.setAttributeid，locationField； //动态创建输入元素，这样就不需要等待它呈现 var input=document.createElement'input'； input.setAttributeid，自动完成； input.setAttributeplaceholder，输入您的地址； input.setAttributetype，文本； input.setAttributeautocomplete，关闭； inputDiv.appendChildinput； var form=document.getElementById'NameAdd'； form.insertBeforeinput，form.firstChild； var autocomplete=new google.maps.places.Autocompleteinput； };

---

您在哪里创建google.maps.places.Autocomplete对象？在名为initAutoComplete的javascript函数中@geocodezip@geocodezip这与谷歌示例中使用的功能相同：请将其添加到您的问题中，以制作一个演示该问题的示例。我刚刚尝试了这个功能，我能够获得搜索结果，但现在我的输入不再有效人口。我已附上代码@地理编码这不是原始问题的一部分。我已将您的答案标记为解决方案，因为它确实有效。我知道发生了什么。在将输入添加到页面后，我不得不回忆我的一个函数。我回滚了问题