diff --git a/app/assets/javascripts/discourse/app/lib/link-mentions.js b/app/assets/javascripts/discourse/app/lib/link-mentions.js
index 577a60c4dbf..e7cd5c29de3 100644
--- a/app/assets/javascripts/discourse/app/lib/link-mentions.js
+++ b/app/assets/javascripts/discourse/app/lib/link-mentions.js
@@ -6,32 +6,40 @@ import { userPath } from "discourse/lib/url";
 let maxGroupMention;
 
 function replaceSpan($e, username, opts) {
-  let extra = "";
-  let extraClass = "";
+  let extra = {};
+  let extraClass = [];
+  const element = $e[0];
+  const a = document.createElement("a");
 
   if (opts && opts.group) {
     if (opts.mentionable) {
-      extra = `data-name='${username}' data-mentionable-user-count='${opts.mentionable.user_count}' data-max-mentions='${maxGroupMention}'`;
-      extraClass = "notify";
+      extra = {
+        name: username,
+        mentionableUserCount: opts.mentionable.user_count,
+        maxMentions: maxGroupMention,
+      };
+      extraClass.push("notify");
     }
-    $e.replaceWith(
-      `<a href='${
-        getURL("/g/") + username
-      }' class='mention-group ${extraClass}' ${extra}>@${username}</a>`
-    );
+
+    a.setAttribute("href", getURL("/g/") + username);
+    a.classList.add("mention-group", ...extraClass);
+    a.innerText = `@${username}`;
   } else {
     if (opts && opts.cannot_see) {
-      extra = `data-name='${username}'`;
-      extraClass = "cannot-see";
+      extra = { name: username };
+      extraClass.push("cannot-see");
     }
-    $e.replaceWith(
-      `<a href='${userPath(
-        username.toLowerCase()
-      )}' class='mention ${extraClass}' ${extra}>@${formatUsername(
-        username
-      )}</a>`
-    );
+
+    a.href = userPath(username.toLowerCase());
+    a.classList.add("mention", ...extraClass);
+    a.innerText = `@${formatUsername(username)}`;
   }
+
+  Object.keys(extra).forEach((key) => {
+    a.dataset[key] = extra[key];
+  });
+
+  element.replaceWith(a);
 }
 
 const found = {};