diff --git a/src/pat/markdown/markdown.js b/src/pat/markdown/markdown.js
index e8127df73..3de5e3e1a 100644
--- a/src/pat/markdown/markdown.js
+++ b/src/pat/markdown/markdown.js
@@ -22,8 +22,7 @@ const Markdown = Base.extend({
                 ? this.$el.val()
                 : this.$el[0].innerHTML;
             let rendered = await this.render(source);
-            this.el.innerHTML = "";
-            this.el.append(...rendered[0].childNodes);
+            this.el.replaceWith(...rendered);
         }
     },
 
diff --git a/src/pat/markdown/markdown.test.js b/src/pat/markdown/markdown.test.js
index 06bc938c5..06ea010cc 100644
--- a/src/pat/markdown/markdown.test.js
+++ b/src/pat/markdown/markdown.test.js
@@ -16,7 +16,7 @@ describe("pat-markdown", function () {
         afterEach(() => {
             jest.restoreAllMocks();
         });
-        it("It renders content for elements with the pattern trigger.", async function () {
+        it("Replaces the DOM element with the rendered Markdown content.", async function () {
             var $el = $('<p class="pat-markdown"></p>');
             $el.appendTo("#lab");
             jest.spyOn(pattern.prototype, "render").mockImplementation(() => {
@@ -24,7 +24,7 @@ describe("pat-markdown", function () {
             });
             pattern.init($el);
             await utils.timeout(1); // wait a tick for async to settle.
-            expect($("#lab").html()).toBe('<p class="pat-markdown">Rendering</p>');
+            expect($("#lab").html()).toBe("<p>Rendering</p>");
         });
 
         it("It does not render when the DOM element doesn't have the pattern trigger", function () {
@@ -162,7 +162,9 @@ describe("pat-markdown", function () {
 
     describe("Code blocks", function () {
         it("It correctly renders code blocks", async function () {
-            document.body.innerHTML = `<div class="pat-markdown">
+            document.body.innerHTML = `
+                <main>
+                    <div class="pat-markdown">
 # Title
 
 some content
@@ -170,18 +172,20 @@ some content
 \`\`\`javascript
     const foo = "bar";
 \`\`\`
-</div>
-`;
+
+                    </div>
+                </main>
+                `;
 
             new pattern(document.querySelector(".pat-markdown"));
             await utils.timeout(1); // wait a tick for async to settle.
             await utils.timeout(1); // wait a tick for async to settle.
 
-            expect(document.body.querySelector(".pat-markdown > h1").textContent).toBe("Title"); // prettier-ignore
-            expect(document.body.querySelector(".pat-markdown > p").textContent).toBe("some content"); // prettier-ignore
-            expect(document.body.querySelector(".pat-markdown > pre code")).toBeTruthy(); // prettier-ignore
-            expect(document.body.querySelector(".pat-markdown > pre.language-javascript code.language-javascript")).toBeTruthy(); // prettier-ignore
-            expect(document.body.querySelector(".pat-markdown > pre code .hljs-keyword")).toBeTruthy(); // prettier-ignore
+            expect(document.body.querySelector("main > div > h1").textContent).toBe("Title"); // prettier-ignore
+            expect(document.body.querySelector("main > div > p").textContent).toBe("some content"); // prettier-ignore
+            expect(document.body.querySelector("main > div > pre code")).toBeTruthy(); // prettier-ignore
+            expect(document.body.querySelector("main > div > pre.language-javascript code.language-javascript")).toBeTruthy(); // prettier-ignore
+            expect(document.body.querySelector("main > div > pre code .hljs-keyword")).toBeTruthy(); // prettier-ignore
         });
     });
 });