如何使用 javascript 将新图像元素添加到 html href link？

Question

我在此处为这段代码创建新图像元素时遇到问题：

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

不幸的是，我无法访问 HTML 代码，因为它属于 "jimdo" 的锁定模板。我只能在 "head area" 中插入 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/Whosebug/company/img/logos/so/so-icon.png?v=c78bd457575a' alt='Whosebug Logo'/>";
}

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

如何使用 javascript 将新图像元素添加到 html href link？

How to add new image element to html href link with javascript?

html

javascript

css

href