Fix category headers showing as raw HTML on New Item page

[Abhijeet212004]

Fixes #26053

When the flat class is removed from the items container on the New Item page, category titles and descriptions show up as raw HTML text (like <h2>Freestyle projects</h2>) instead of being rendered as proper HTML elements.

This is a regression from PR #10208 which migrated the page from jQuery to vanilla JavaScript. The problem is that jQuery's .append() automatically parses HTML strings, but vanilla JS .append() treats strings as plain text nodes.

The fix: I wrapped the title and description strings with createElementFromHtml() before appending them. This function is already imported and used elsewhere in the same file (lines 123, 128, 129), so it's following the existing pattern.

Testing done

I tested this by:

• Running node --check on the file - no syntax errors
• Confirming createElementFromHtml() is imported at the top and already used in the same way elsewhere
• Successfully building the frontend with npm run dev
• The change is just 2 lines, wrapping existing variables with the helper function

Screenshots (UI changes only)

Before

Categories display as literal HTML strings (<h2>Freestyle projects</h2><p>This is the central feature...</p>) instead of rendered elements. This happens when the flat class is removed from div#items as documented in issue #26053.

After

Categories render correctly with properly formatted h2 headings and paragraph text.

Proposed changelog entries

• Fix category headers showing as raw HTML on New Item page

Proposed changelog category

/label regression-fix web-ui

Proposed upgrade guidelines

N/A

Submitter checklist

• The issue, if it exists, is well-described.
• The changelog entries and upgrade guidelines are appropriate for the audience affected by the change (users or developers, depending on the change) and are in the imperative mood.
• There is automated testing or an explanation as to why this change has no tests.
• UI changes do not introduce regressions when enforcing the current default rules of Content Security Policy Plugin. In particular, new or substantially changed JavaScript is not defined inline and does not call eval.

Desired reviewers

@daniel-beck @jenkinsci/core-pr-reviewers

[comment-ops-bot]

I wasn't able to add the following labels: regression-fix web-ui

Check that the label exists and is spelt right then try again.

[github-actions]

Missing required label for changelog. Requires at least 1 of: bug, developer, dependencies, internal, localization, major-bug, major-rfe, rfe, regression-fix, removed, skip-changelog. Found: .

You can add the required label by adding a comment with the following text: /label <category>

[comment-ops-bot]

I wasn't able to add the following labels: regression-fix web-ui

Check that the label exists and is spelt right then try again.

[comment-ops-bot]

I wasn't able to add the following labels: regression-fix web-ui

Check that the label exists and is spelt right then try again.

[comment-ops-bot]

I wasn't able to add the following labels: regression-fix web-ui

Check that the label exists and is spelt right then try again.