javascript - 使用 .after() 一个接一个地插入一个元素并不完全有效

Question

在网页中(来 self 无法访问的远程服务器)我想在某个元素之后以及网页加载之后插入页面 URL。

我的解决方案发布在下面的代码片段中

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

页面的 URL 被插入，但只是作为文本，而不是作为可识别的元素。

该 URL 不像其他链接那样活跃。看看我上传的快照。

为什么我的 anchor 元素中的文本没有呈现蓝色？此外，“href”没有像下面的其他 anchor 元素那样突出显示为红色。

“.after()”不是合适的函数吗？

Answer 1

在您的代码中，您将在 pane 节点之后插入一个字符串作为 Element.after文档显示。如果您想在 after 之后使用，请使用 document.createElement 修改您的代码并修改生成的元素以反射(reflect)您的原始意图

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>