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

Question

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

My solution is posted in the snippet below

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

The page's URL is inserted, but only as text, not as a recognized element.

The URL is NOT active like the other links. Take a look at the snapshot I uploaded.

Why is the text in my anchor-element not rendering blue? Furthermore the "href" is not highlighted red like the other anchor elements are below.

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

Answer 1

In your code, you are inserting a string after the pane node as the Element.after documentation shows. If you want to use after, modify your code with document.createElement and modify the resulting elements to mirror your original intent

var address =
  "https://www.ghacks.net/2021/10/02/which-are-the-best-screenshot-extensions-for-chrome/";
var pane = document.getElementsByClassName("heading--large")[0];
var myLink = document.createElement("a");
myLink.href = address;
myLink.textContent = address;
pane.after(myLink);

<main class="post-list mt--60 mt--first--0">
  <h1 class="heading--large" style="color:#43414e;font-weight:400;"> Which are the best screenshot extensions for Chrome? </h1>
  <div class="text-small ghacks-links ghacks-links--smallunderline mt--10 mb--20" style="font-size: 14px;opacity:0.9;margin-top:10px;margin-bottom:20px;"> by Shaun on October 02, 2021 in Google Chrome extensions - Last Update: September 30, 2021 - 6 comments </div>
</main>