将 HTML 文本插入到 div 之前使用 javascript 创建的 div

Question

我正在传单地图中创建弹出窗口。弹出内容应使用 javascript 动态创建。在将内容添加到带有 innerHTML 的弹出窗口内的div 容器时，我收到错误消息："无法将属性'innerHTML'设置为 null">

这是我的代码：

//create div for form element "Baumpatenschaft"
var div_baumpatenschaft = document.createElement('div');
//add div_baumpatenschaft to DOM (child of <div> with id="formular")
formular.appendChild(div_baumpatenschaft);
//create ID for div
div_baumpatenschaft.id = "div_baumpatenschaft";
var pt = document.getElementById("div_baumpatenschaft");    
//HTML code for creating radio buttons stored in var baumpatenschaft
var baumpatenschaft = 
      '<label for="radio_ja">ja</label><br/>
      <input checked="checked" type="radio" name="baumpatenschaft" id="radio_ja" value="ja"/>
      <label for="radio_nein">nein</label><br/>
      <input type="radio" name="baumpatenschaft" id="radio_nein" value="nein"/>';

//adding the HTML-code to div_baumpatenschaft
pt.innerHTML = baumpatenschaft;

显然，div_baumpatenschaft尚未创建，因为innerHTML尝试将HTML代码插入<div>。

我也尝试过element.insertAdjacentHTML()同样的错误。

我做错了什么？有没有另一种可能解决这个问题？我绝对想用 document.createElement('div') 创建div，我还想将单选按钮定义为存储在变量中的 HTML 文本，而不是我以前做过的document.createElement('input')。

Answer 1

这是因为创建的元素不是文档的一部分。您可以在访问之前将创建的元素附加到正文中，如下所示：

document.body.appendChild(div_baumpatenschaft);

//create div for form element "Baumpatenschaft"
var div_baumpatenschaft = document.createElement('div');
//create ID for div
div_baumpatenschaft.id = "div_baumpatenschaft";
document.body.appendChild(div_baumpatenschaft);
var pt = document.getElementById("div_baumpatenschaft");    
//HTML code for creating radio buttons stored in var baumpatenschaft
var baumpatenschaft = 
      '<label for="radio_ja">ja</label><br/>
      <input checked="checked" type="radio" name="baumpatenschaft" id="radio_ja" value="ja"/>
      <label for="radio_nein">nein</label><br/>
      <input type="radio" name="baumpatenschaft" id="radio_nein" value="nein"/>';
//adding the HTML-code to div_baumpatenschaft
pt.innerHTML = baumpatenschaft;

更新：

//create div for form element "Baumpatenschaft"
var div_baumpatenschaft = document.createElement('div');
//add div_baumpatenschaft to DOM (child of <div> with id="formular")
var formular = document.getElementById('formular');
formular.appendChild(div_baumpatenschaft);
//create ID for div
div_baumpatenschaft.id = "div_baumpatenschaft";
var pt = document.getElementById("div_baumpatenschaft");    
//HTML code for creating radio buttons stored in var baumpatenschaft
var baumpatenschaft = 
      '<label for="radio_ja">ja</label><br/>
      <input checked="checked" type="radio" name="baumpatenschaft" id="radio_ja" value="ja"/>
      <label for="radio_nein">nein</label><br/>
      <input type="radio" name="baumpatenschaft" id="radio_nein" value="nein"/>';
//adding the HTML-code to div_baumpatenschaft
pt.innerHTML = baumpatenschaft;

<div id="formular"></div>