JavaScriptを使って、aタグで囲ったものの末尾にimgタグを挿入する

Question

とても初歩的な内容の質問かもしれませんが、色々調べても解決できなかったので、こちらで質問させていただきます。すみません。

また、ところどころ用語の使い方が間違っているかもしれません。面倒をおかけしてしまい、申し訳ございません。

前提・実現したいこと

Webサイトを作っている中で、「<a href="...." target="_blank"></a>の中身の末尾（</a>の直前）に、<img src="../img/hogehogehoge.svg">が自動で挿入されるようにしたい。」と思いました。

発生している問題

HTMLとJavaScriptで下記コードのように書いたのですが...

<div class="web-list">
  <ul>
    <li>
      <a href="https://www.google.com/" target="_blank">Google</a>
    </li>
    <li>
      <a href="https://www.apple.com/" target="_blank">Apple</a>
    </li>
    <li>
      <a href="https://www.microsoft.com/ja-jp/" target="_blank">Microsoft</a>
    </li>
  </ul>
</div>

window.addEventListener('DOMContentLoaded', () => {
  var img = document.createElement("img");
  img.src = "../img/hogehogehoge.svg";

  const pageJump = Array.from(document.querySelectorAll('.web-list a[target="_blank"]'));
  pageJump.forEach(
    value => value.appendChild(img)
  );
});

結果としては、三番目のliの</a>直前のみにimgが挿入され、その前の二つにはimgが挿入されませんでした。

（すなわち、

<div class="web-list">
  <ul>
    <li>
      <a href="https://www.google.com/" target="_blank">Google</a>
    </li>
    <li>
      <a href="https://www.apple.com/" target="_blank">Apple</a>
    </li>
    <li>
      <a href="https://www.microsoft.com/ja-jp/" target="_blank">Microsoft<img src= "../img/hogehogehoge.svg"></a>
    </li>
  </ul>
</div>

となりました。）

（繰り返しになりますが、）全ての<a href="...." target="_blank"></a>の閉じタグ（</a>）直前に、指定したimg（<img src="../img/hogehogehoge.svg">）を自動で挿入するには、どうすれば良いでしょうか。

最後に

おそらく、JavaScriptのforEachとappendChildの使い方が誤っているために上手くいかないのだろう、とは思っているのですが、どのように解決すればいいかわからず、こちらで質問させていただきました。

拙い文章で、また所々説明がわかりづらくなっており、申し訳ございません。
ご回答いただけましたら幸いです。

追記1（解決後）

回答者様、コメントをくださった方、解決方法を教えていただき、ありがとうございました。
実際に書き直したJavaScriptのコードを、こちらに追記いたします。

window.addEventListener('DOMContentLoaded', () => {
  var img = document.createElement("img");
  img.src = "../img/hogehogehoge.svg";

  const pageJump = Array.from(document.querySelectorAll('.web-list a[target="_blank"]'));
  pageJump.forEach(value => {
    img = img.cloneNode(true);
    value.appendChild(img)
  });
});

Comments

[babu_babu_baboo]

cloneNode でコピーして追加する。その都度作るなど愚の骨頂

[TorihaSameja]

cloneNodeについて教えていただき、ありがとうございます。
cloneNodeも用いてコードを書き直したところ、無事問題解決できました。コメントいただき、ありがとうございました。

Answer 1

window.addEventListener('DOMContentLoaded', () => {
  const pageJump = Array.from(document.querySelectorAll('.web-list a[target="_blank"]'));
  pageJump.forEach(
    value => {
      var img = document.createElement("img"); // 毎回作る
      img.src = "../img/hogehogehoge.svg";
      value.appendChild(img)
    }
  );
});

Comments

[TorihaSameja]

ご回答いただきありがとうございます！
無事に解決できました。