#javascript #html
Вопрос:
На веб-странице (с удаленного сервера, к которому у меня нет доступа) Я хочу вставить URL-адрес страницы после определенного элемента и после загрузки веб-страницы
Поэтому я использую следующий код:
var address = document.URL;
var pane = document.getElementsByClassName("heading--large")[0];
pane.after("<a href="" address "">" address "</a>");
Да, URL-адрес страницы вставляется, но только как текст, а не как распознанный элемент.
URL-адрес НЕ доступен для кликабельности (как и следующие другие ссылки). Взгляните на следующий снимок:
Почему во вставленном элементе «a» не синий, а «href» не красный, как в других элементах «a» ниже?
Является ли «.after()» неподходящей функцией?
Ответ №1:
В вашем коде вы вставляете строку pane
после узла в качестве элемента.как показано в документации. Если вы хотите использовать after
, измените свой код с помощью document.createElement и измените результирующие элементы, чтобы они отражали ваше первоначальное намерение
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>
Альтернатива: outerHTML
Если вы хотите прикрепить исходную html-строку так, как она должна быть после pane
узла, другой способ добиться этого-изменить outerHTML
родительскую строку (немного менее обычную, но она все еще работает).:
var address =
"https://www.ghacks.net/2021/10/02/which-are-the-best-screenshot-extensions-for-chrome/";
var addHtml = '<a href="' address '">' address "</a>";
var pane = document.getElementsByClassName("heading--large")[0];
pane.outerHTML = pane.outerHTML addHtml;
<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>
Я протестировал оба из них на исходной странице, о которой идет речь, используя document.URL
вместо статического адреса, указанного в приведенных здесь кодах.