Fix the sample's replace logic and add a new replaceElWithHTML method to dom

Author: HTMLGuyLLC

README.md

@@ -269,7 +269,7 @@ modal_form.insertForm = function(parsed_content, response, form){
     if( form ){
         
         //replace and reassign
-        form = form.outerHTML = parsed_content.html;
+        form = dom.replaceElWithHTML(form, parsed_content.html);
         
         //attach submit handler
         self.attachSubmitHandler(form);

dist/jpack.min.js

@@ -1,6 +1,6 @@
 {
   "name": "@htmlguyllc/jpack",
-  "version": "0.5.23",
+  "version": "0.5.24",
   "description": "Core Javascript Library of Everyday Objects, Events, and Utilities",
   "keywords": [
     "javascript",

package-lock.json

@@ -381,11 +381,11 @@ export const navigation = {
                 navigation.setTitle(parsed.title);
 
                 //replace content on the page
-                dom.getElement(replace_el).outerHTML = parsed.html;
+                const new_content = dom.replaceElWithHTML(replace_el, parsed.html);
 
                 //trigger nav complete event
                 //get replace_el again because it was replaced
-                navigation.triggerOnLoad(dom.getElement(incoming_el), incoming_el, parsed.route);
+                navigation.triggerOnLoad(new_content, incoming_el, parsed.route);
             }
         }, 100);
 

package.json

@@ -15,10 +15,7 @@ export const dom = {
     getElement: function(el, error_on_none, error_on_multiple){
         el = this.getElements(el, error_on_none);
 
-        if( el.length > 1 ){
-            if( error_on_multiple ) throw "Too many DOM elements found in getElement for "+JSON.stringify(el);
-            return null;
-        }
+        if( el.length > 1 && error_on_multiple ) throw "Too many DOM elements found in getElement for "+JSON.stringify(el);
 
         return el[0];
     },
@@ -87,6 +84,33 @@ export const dom = {
         return this;
     },
 
+    /**
+     * Replaces a dom element with HTML
+     *
+     * uses .getElement() so el can be just about anything
+     *
+     * @param el
+     * @param html
+     * @returns {ChildNode}
+     */
+    replaceElWithHTML: function(el, html){
+        if( typeof html !== 'string' ) throw `${html} is not a string`;
+
+        el = this.getElement(el);
+
+        //create element from HTML
+        let new_el = (new DOMParser()).parseFromString(html, "text/html");
+
+        //insert the new element before the current
+        new_el = el.parentNode.insertBefore(new_el.documentElement.querySelector('body').childNodes[0], el);
+
+        //remove original element
+        el.remove();
+
+        //return the new one
+        return new_el;
+    },
+
     /**
      * Returns true if the provided element exists
      *