diff --git a/web/resolver/actions/queue_methods.js b/web/resolver/actions/queue_methods.js
index 95f51bc..b7e137a 100644
--- a/web/resolver/actions/queue_methods.js
+++ b/web/resolver/actions/queue_methods.js
@@ -2,6 +2,7 @@ import { app } from "../../../../../scripts/app.js";
 import { $el } from "../../../../../scripts/ui.js";
 import { getSvgIcon } from "../../utils/icon_utils.js";
 import { startSplitterDrag } from "../utils/splitter_drag.js";
+import { syncElementAttributes } from "../utils/dom_patch_utils.js";
 const FOOTER_VERSION_REFRESH_INTERVAL_MS = 6 * 60 * 60 * 1000;
 const FOOTER_VERSION_FAILURE_REFRESH_INTERVAL_MS = 5 * 60 * 1000;
 
@@ -1047,19 +1048,6 @@ export const queueMethods = {
     },
 
     patchDownloadsPanelElement(currentElement, nextElement) {
-        const syncAttributes = (current, next) => {
-            const nextAttributeNames = new Set(Array.from(next.attributes || [], attribute => attribute.name));
-            for (const attribute of Array.from(next.attributes || [])) {
-                if (current.getAttribute(attribute.name) !== attribute.value) {
-                    current.setAttribute(attribute.name, attribute.value);
-                }
-            }
-            for (const attribute of Array.from(current.attributes || [])) {
-                if (!nextAttributeNames.has(attribute.name)) {
-                    current.removeAttribute(attribute.name);
-                }
-            }
-        };
         const getNodeKey = (node) => {
             if (node?.nodeType !== 1) return '';
             if (!node.classList?.contains('mr-download-queue-item')) return '';
@@ -1085,7 +1073,7 @@ export const queueMethods = {
                 return current;
             }
 
-            syncAttributes(current, next);
+            syncElementAttributes(current, next);
             patchChildren(current, next);
             return current;
         };
diff --git a/web/resolver/actions/resolve_download_methods.js b/web/resolver/actions/resolve_download_methods.js
index 2ddad19..1734f09 100644
--- a/web/resolver/actions/resolve_download_methods.js
+++ b/web/resolver/actions/resolve_download_methods.js
@@ -4,6 +4,7 @@ import { getModelCardUrl, parseHuggingFaceFileUrl } from "../utils/url_utils.js"
 import { getCivitaiModelUrl } from "../globals.js";
 import { normalizeSha256 } from "../utils/hash_utils.js";
 import { normalizePathIdentity } from "../utils/html_utils.js";
+import { syncElementAttributes } from "../utils/dom_patch_utils.js";
 const log = createModuleLogger('resolve_download_methods');
 
 export const resolveDownloadMethods = {
@@ -3268,18 +3269,7 @@ export const resolveDownloadMethods = {
     },
 
     syncSearchElementAttributes(current, next) {
-        if (!current || !next) return;
-
-        for (const attribute of Array.from(current.attributes || [])) {
-            if (!next.hasAttribute(attribute.name)) {
-                current.removeAttribute(attribute.name);
-            }
-        }
-        for (const attribute of Array.from(next.attributes || [])) {
-            if (current.getAttribute(attribute.name) !== attribute.value) {
-                current.setAttribute(attribute.name, attribute.value);
-            }
-        }
+        return syncElementAttributes(current, next);
     },
 
     patchSearchProgressActions(currentItem, nextItem) {
diff --git a/web/resolver/utils/render_format_methods.js b/web/resolver/utils/render_format_methods.js
index 022f073..5eaa3c3 100644
--- a/web/resolver/utils/render_format_methods.js
+++ b/web/resolver/utils/render_format_methods.js
@@ -1,5 +1,6 @@
 import { api } from "../../../../../scripts/api.js";
 import { escapeHtml, escapeJsString, getFilenameFromPath, pollBackgroundTask } from "./html_utils.js";
+import { syncElementAttributes, setTextIfChanged } from "./dom_patch_utils.js";
 
 export const renderFormatMethods = {
     escapeHtml,
@@ -237,16 +238,6 @@ export const renderFormatMethods = {
             return;
         }
 
-        const syncAttributes = (current, next) => {
-            for (const attribute of Array.from(current.attributes || [])) {
-                if (!next.hasAttribute(attribute.name)) current.removeAttribute(attribute.name);
-            }
-            for (const attribute of Array.from(next.attributes || [])) {
-                if (current.getAttribute(attribute.name) !== attribute.value) {
-                    current.setAttribute(attribute.name, attribute.value);
-                }
-            }
-        };
         const currentInfo = Array.from(currentRoot.querySelectorAll('.mr-download-info'));
         const nextInfo = Array.from(nextRoot.querySelectorAll('.mr-download-info'));
         const currentProgressBar = currentRoot.querySelector('.mr-progress-bar');
@@ -265,22 +256,18 @@ export const renderFormatMethods = {
             || currentProgressText.length !== nextProgressText.length
         ) {
             currentRoot.innerHTML = nextRoot.innerHTML;
-            syncAttributes(currentRoot, nextRoot);
+            syncElementAttributes(currentRoot, nextRoot);
             return;
         }
 
-        syncAttributes(currentRoot, nextRoot);
+        syncElementAttributes(currentRoot, nextRoot);
         currentInfo.forEach((element, index) => {
-            if (element.textContent !== nextInfo[index].textContent) {
-                element.textContent = nextInfo[index].textContent;
-            }
+            setTextIfChanged(element, nextInfo[index].textContent);
         });
-        syncAttributes(currentProgressBar, nextProgressBar);
-        syncAttributes(currentProgressFill, nextProgressFill);
+        syncElementAttributes(currentProgressBar, nextProgressBar);
+        syncElementAttributes(currentProgressFill, nextProgressFill);
         currentProgressText.forEach((element, index) => {
-            if (element.textContent !== nextProgressText[index].textContent) {
-                element.textContent = nextProgressText[index].textContent;
-            }
+            setTextIfChanged(element, nextProgressText[index].textContent);
         });
     },