Блог

Главная - Вопросы по программированию - Вставка элемента после другого с помощью .after() не работает полностью

Вставка элемента после другого с помощью .after() не работает полностью

#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 вместо статического адреса, указанного в приведенных здесь кодах.

Метки: