title: How to remove and put again group of divs
body: <p><br>
  Found a problem with turning on/off background script<br>
  I have two divs</p>
  
  <pre><code>&lt;div class="parallax__layer parallax__layer--back" id="par_back"&gt;
      &lt;div  id="back"&gt;
          &lt;canvas&gt;&lt;/canvas&gt; 
          &lt;canvas&gt;&lt;/canvas&gt;
          &lt;script src="js/index.js"&gt;&lt;/script&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p>and function that will remove this code for lower resourses using and paste it again</p>
  
  <pre><code>function Eco() {
    var checkBox = document.getElementById("eco");
    var script = document.getElementById("back");
  
    // If the checkbox is checked, display the output text
    if (checkBox.checked == true){
        script.parentNode.removeChild(script);  
    } else {
        script.innerHTML = "&lt;div  id="back"&gt;&lt;canvas&gt;&lt;/canvas&gt;&lt;canvas&gt;&lt;/canvas&gt;&lt;script src="js/index.js"&gt;&lt;/script&gt;&lt;/div&gt;";
    }
  }
  </code></pre>
  
  <p>but innerHTML doesn't works for divs(<p></p></p>