Inserting an element after another with .after() does not fully work

[pstein]

In a webpage (from remote server where I have no access) I want to insert the page URL after a certain element and after loading of the webpage

Therefore I use the following code:

var address = document.URL;
var pane = document.getElementsByClassName("heading--large")[0];
pane.after("<a href=\"" + address + "\">" + address + "<\\a>");

Yes, the page URL is inserted, but only as text and not as recognized element.

The URL is NOT clickable (as the following other Links). Have a look at the following snapshot:

Why is in the inserted element "a" not blue and "href" not red as in the others "a" elements below?

Is ".after()" not the suitable function?

Edited October 3, 2021 by pstein

[Ingolme]

It's best to use DOM objects instead of HTML strings when working in Javascript.

var pane = document.getElementsByClassName("heading--large")[0];

var link = document.createElement("a");
link.href = document.URL;

pane.after(link);