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

Question

我正在 Leaflet map 中创建弹出窗口。弹出内容应使用 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 试图在 <div> 中插入 HTML 代码。 .

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

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

Answer 1

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

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>