Don't override innerHTML (#85)

When overriding the innerHTML we are losing all events subscribers.
This is breaking a lot of plugins, most recently sphinx-tabs.

Author: stsewd

docs/requirements.txt

@@ -1,6 +1,6 @@
 sphinx==3.5.1
 sphinx-prompt==1.1.0
-sphinx-tabs==1.1.10
+sphinx-tabs==2.0.1
 sphinx-rtd-theme==0.4.3
 sphinx-notfound-page==0.3
 sphinx-js==3.1

sphinx_search/static/js/rtd_sphinx_search.js

@@ -610,24 +610,26 @@ const fetchAndGenerateResults = (search_url, projectName) => {
  * @return {String} initial html structure
  */
 const generateAndReturnInitialHtml = () => {
-    let initialHtml =
-        '<div class="search__outer__wrapper search__backdrop"> \
-            <div class="search__outer"> \
-                <div class="search__cross" title="Close"> \
-                    <!--?xml version="1.0" encoding="UTF-8"?--> \
-                    <svg class="search__cross__img" width="15px" height="15px" enable-background="new 0 0 612 612" version="1.1" viewBox="0 0 612 612" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"> \
-                        <polygon points="612 36.004 576.52 0.603 306 270.61 35.478 0.603 0 36.004 270.52 306.01 0 576 35.478 611.4 306 341.41 576.52 611.4 612 576 341.46 306.01"></polygon> \
-                    </svg> \
-                </div> \
-                <input class="search__outer__input" placeholder="Search ..."> \
-                <span class="bar"></span> \
+    let innerHTML =
+        '<div class="search__outer"> \
+            <div class="search__cross" title="Close"> \
+                <!--?xml version="1.0" encoding="UTF-8"?--> \
+                <svg class="search__cross__img" width="15px" height="15px" enable-background="new 0 0 612 612" version="1.1" viewBox="0 0 612 612" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"> \
+                    <polygon points="612 36.004 576.52 0.603 306 270.61 35.478 0.603 0 36.004 270.52 306.01 0 576 35.478 611.4 306 341.41 576.52 611.4 612 576 341.46 306.01"></polygon> \
+                </svg> \
             </div> \
-            <div class="rtd__search__credits"> \
-                Search by <a href="https://readthedocs.org/">Read the Docs</a> & <a href="https://readthedocs-sphinx-search.readthedocs.io/en/latest/">readthedocs-sphinx-search</a> \
-            <div> \
+            <input class="search__outer__input" placeholder="Search ..."> \
+            <span class="bar"></span> \
+        </div> \
+        <div class="rtd__search__credits"> \
+            Search by <a href="https://readthedocs.org/">Read the Docs</a> & <a href="https://readthedocs-sphinx-search.readthedocs.io/en/latest/">readthedocs-sphinx-search</a> \
         </div>';
 
-    return initialHtml;
+    let div = createDomNode("div", {
+        class: "search__outer__wrapper search__backdrop",
+    });
+    div.innerHTML = innerHTML;
+    return div;
 };
 
 /**
@@ -688,7 +690,7 @@ const removeSearchModal = () => {
     $(".search__outer__wrapper").fadeOut(ANIMATION_TIME);
 };
 
-window.addEventListener("DOMContentLoaded", evt => {
+window.addEventListener("DOMContentLoaded", () => {
     // only add event listeners if READTHEDOCS_DATA global
     // variable is found.
     if (window.hasOwnProperty("READTHEDOCS_DATA")) {
@@ -698,7 +700,7 @@ window.addEventListener("DOMContentLoaded", evt => {
         const api_host = '/_';
 
         let initialHtml = generateAndReturnInitialHtml();
-        document.body.innerHTML += initialHtml;
+        document.body.appendChild(initialHtml);
 
         let search_outer_wrapper = document.querySelector(
             ".search__outer__wrapper"