Enable `no-jquery/no-parse-html-literal` and fix violation (#31684)

Tested it, path segment creation works just like before.

.eslintrc.yaml

@@ -568,7 +568,7 @@ rules:
   no-jquery/no-param: [2]
   no-jquery/no-parent: [0]
   no-jquery/no-parents: [2]
-  no-jquery/no-parse-html-literal: [0]
+  no-jquery/no-parse-html-literal: [2]
   no-jquery/no-parse-html: [2]
   no-jquery/no-parse-json: [2]
   no-jquery/no-parse-xml: [2]

web_src/js/features/repo-editor.ts

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import {htmlEscape} from 'escape-goat';
 import {createCodeEditor} from './codeeditor.ts';
-import {hideElem, queryElems, showElem} from '../utils/dom.ts';
+import {hideElem, queryElems, showElem, createElementFromHTML} from '../utils/dom.ts';
 import {initMarkupContent} from '../markup/content.ts';
 import {attachRefIssueContextPopup} from './contextpopup.ts';
 import {POST} from '../modules/fetch.ts';
@@ -61,7 +61,7 @@ export function initRepoEditor() {
     });
   }
 
-  const filenameInput = document.querySelector('#file-name');
+  const filenameInput = document.querySelector<HTMLInputElement>('#file-name');
   function joinTreePath() {
     const parts = [];
     for (const el of document.querySelectorAll('.breadcrumb span.section')) {
@@ -80,8 +80,12 @@ export function initRepoEditor() {
         const value = parts[i];
         if (i < parts.length - 1) {
           if (value.length) {
-            $(`<span class="section"><a href="#">${htmlEscape(value)}</a></span>`).insertBefore($(filenameInput));
-            $('<div class="breadcrumb-divider">/</div>').insertBefore($(filenameInput));
+            filenameInput.before(createElementFromHTML(
+              `<span class="section"><a href="#">${htmlEscape(value)}</a></span>`,
+            ));
+            filenameInput.before(createElementFromHTML(
+              `<div class="breadcrumb-divider">/</div>`,
+            ));
           }
         } else {
           filenameInput.value = value;