title: Javascript dom manipulation memory leak
body: <p>Hi I have created a dom using raw javascript DOM:</p>
  
  <p>Javascript code:</p>
  
  <pre><code>var parentElm = document.createElement("div");
  var child1 = document.createElement("p");
  var child2 = document.createElement("p");
  
  parentElm.id = "parent";
  child1.id = "child1";
  child2.id = "child2";
  
  child1.innerHTML = "Hello";
  child2.innerHTML = "world"; // Is it a good way 
  
  parentElm.appendChild(child1);
  parentElm.appendChild(child2);
  document.body.appendChild(parentElm);
  </code></pre>
  
  <p>The resulted HTML is:</p>
  
  <pre><code>&lt;div id="parent"&gt;
      &lt;p id="child1"&gt;Hello&lt;/p&gt;
      &lt;p id="child2"&gt;World&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now when I want to remove the above section, I do as following.</p>
  
  <pre><code>document.body.removeChild(parentElm);
  </code></pre>
  
  <p>Here I am afraid of javascript memory leak.</p>
  
  <ul>
  <li>If I am removing parent element from body, does it totally removed
  from memory. ? </li>
  <li>If I am removing parent element from body, does it's
  child elements are also removed from memory by garbage collector automatically. Or I need to remove
  child elements manually ?</li>
  <li>Is using innerHTML in the above code is  a good way (child1.innerHTML = "Hello";)</li>
  </ul>
  
  <p>Please help me in javascript dom manipulation.</p>