title: How to programmatically append a newly created div to an existing one?
body: <p>I have some trouble with appending a new div to an existing parent that I just created. After creation of the parent I check it's existence. But when I want to append the child to it after selecting the parent via it's id I get an error. What do I do wrong?</p>
  <pre><code>var uiDiv = document.createElement(&quot;div&quot;);
  uiDiv.id = &quot;f_jsonuiDiv&quot;;
  uiDiv.innerHTML = &quot;jsonUI controls&quot;;
  console.log(&quot;uiDiv&quot;);
  console.dir(uiDiv);     //shows uiDiv object
  
  //select container div  
  const parentId = &quot;f_jsonuiDiv&quot;;     //which is the id of the newly created container div
  console.log(&quot;parentId: &quot;,parentId);
  var parElement = document.getElementById(parentId);
  console.log(&quot;parElement: &quot;);
  console.dir(parElement);   //says: null !  
  
  //create directly
  //const newDiv = parElement.createElement(&quot;div&quot;); //throws error as parElement does not exist ......
  
  //create first, then append
  const newDiv = document.createElement(&quot;div&quot;); 
  newDiv.innerHTML = &quot;NEW DIV&quot;; 
  
  //parElement.appendChild(newDiv);  //throws error as parElement does not exist ......
  uiDiv.appendChild(newDiv);  //does not throw an error  ``` 
  
  
  </code></pre>