core dom: Add create_from_string to create a DOM Element from a string.

Author: thet

CHANGES.md

@@ -48,6 +48,7 @@
 -   core dom: Add ``find_parents`` to find all parents of an element matching a CSS selector.
 -   core dom: Add ``find_scoped`` to search for elements matching the given selector within the current scope of the given element
 -   core dom: Add ``is_visible`` to check if an element is visible or not.
+-   core dom: Add ``create_from_string`` to create a DOM Element from a string.
     unless an ``id`` selector is given - in that case the search is done globally.
 -   pat date picker: Support updating a date if it is before another dependent date.
 -   pat tabs: Refactor based on ``ResizeObserver`` and fix problems calculating the with with transitions.

src/core/dom.js

@@ -80,6 +80,13 @@ const is_visible = (el) => {
     return el.offsetWidth > 0 && el.offsetHeight > 0;
 };
 
+const create_from_string = (string) => {
+    // Create a DOM element from a string.
+    const div = document.createElement("div");
+    div.innerHTML = string.trim();
+    return div.firstChild;
+};
+
 const dom = {
     toNodeArray: toNodeArray,
     querySelectorAllAndMe: querySelectorAllAndMe,
@@ -89,6 +96,7 @@ const dom = {
     find_parents: find_parents,
     find_scoped: find_scoped,
     is_visible: is_visible,
+    create_from_string: create_from_string,
 };
 
 export default dom;

src/core/dom.test.js

@@ -249,4 +249,33 @@ describe("core.dom tests", () => {
             done();
         });
     });
+
+    describe("create_from_string", () => {
+        it("Creates a DOM element from a string", (done) => {
+            let res = dom.create_from_string(`
+                <section id="section1">
+                    <span class='yo'>does work.</span>
+                </section>`);
+
+            expect(res.getAttribute("id")).toEqual("section1");
+            expect(res.querySelector("span.yo").textContent).toEqual(
+                "does work."
+            );
+
+            res = dom.create_from_string(`
+                <section id="section1"></section>
+                <section id="section2"></section>
+            `);
+            // Section 2 is not returned.
+            expect(res.getAttribute("id")).toEqual("section1");
+
+            // TD elements or others which can not be direct children of a
+            // <div> are not yet supported.
+            // Also see: https://stackoverflow.com/a/494348/1337474
+            res = dom.create_from_string(`<td></td>`);
+            expect(res).toBeFalsy();
+
+            done();
+        });
+    });
 });