如何使用javascript將新圖像元素添加到html href鏈接？

Question

我在此處為此代碼創建新的圖像元素時遇到問題：

<a href="/sound-packs/" data-link-title="Sound Packs">Sound Packs</a>

不幸的是，我無權訪問HTML代碼，因為它屬於“ jimdo”的鎖定模板。 我只能在“頭部”插入CSS代碼和javascript。 有沒有一種方法可以使用javascript將圖像元素添加到此HTML代碼中？

Answer 1

是的，有一種方法可以只使用javascript。 首先，您需要將window.onload回調設置為一個函數。 然后，在此函數中，您可以獲取要將圖像添加到的元素。 在這里，我將圖像添加到具有data-link-title屬性的元素，該屬性等於"Sound Packs" 。

最后，您可以在此元素上使用.innerHTML來添加要在此元素中添加的HTML。 在這里，我添加了<br />后跟<img>標記：

 document.body.onload = function() { let soundPacks = document.querySelector('[data-link-title="Sound Packs"]'); soundPacks.innerHTML += "<br /><img src='https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a' alt='StackOverflow Logo'/>"; } 

 <a href="/sound-packs/" data-link-title="Sound Packs">Sound Packs</a>