Inserting HTML-text to div created before with javascript

Question

I am creating popups in a Leaflet map. The popup content should be created dynamically using javascript. On adding content to a div-container inside the popup with innerHTML, I get the error message: "Cannot set property 'innerHTML' of null"

Here is my code:

//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;

Apparently the div_baumpatenschaft isn't created yet, as innerHTML tries to insert the HTML-code inside the <div>.

I have also tried element.insertAdjacentHTML() with the same error.

What am I doing wrong? Is there another possibility to get around that issue? I definitely want to create the div with document.createElement('div') and I also want to define the radio buttons as HTML-text stored in a variable and not with document.createElement('input'), what I have done before.

You created your element but you did not add it to your document. That's why document.getElementById returned null. — Guillaume Georges
– Guillaume Georges, Commented Mar 29, 2019 at 10:30
Use div_baumpatenschaft for the .innerHTML part and add it to the DOM with .appendChild() — Andreas
– Andreas, Commented Mar 29, 2019 at 10:31
I think you should use div_baumpatenschaft.setAttribute('id',"div_baumpatenschaft"); — Thanveer Shah
– Thanveer Shah, Commented Mar 29, 2019 at 10:33

Mamun · Accepted Answer · 2019-03-29 11:13:15Z

3

This is because the created element is not part of the document. You can append the created element into the body before accessing that like the following way:

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;

Update:

//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>

edited Mar 29, 2019 at 11:13

answered Mar 29, 2019 at 10:31

Mamun

69k9 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Andreas Over a year ago

Create an element, add it to the DOM, let the browser find it again, change its content. There's room for improvement...

pascatl Over a year ago

I missed to post the line with appendChild() in my sample here. I did this in my code, but still with an error message. The solution was, as @Andreas mentioned, to use div_baumpatenschaft.innerHTML() and not pt.innerHTML(). Now it works. Why does innerHTML() not accept document.getElementById("div_baumpatenschaft") stored in a variable?

Andreas Over a year ago

@pascatl It does. But the error ("... of null") indicates that the element isn't part of the DOM yet when you call document.getElementById(...).

Andreas Over a year ago

@pascatl "I missed to post the line with appendChild() in my sample here." - The please adjust your question accordingly (for future readers).

pascatl Over a year ago

Ok, thank you. I think I'm struggling understanding my own code. As I see, in theory it should work.

|

Collectives™ on Stack Overflow

Inserting HTML-text to div created before with javascript

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related