JS：动态添加链接到某个类的所有元素

Question

我在一个系统中工作，其中我们有这些元素代表音频剪辑的一部分，以及可浏览的音频时间线（点击周围播放不同的部分）。 但是，代表音频剪辑部分的元素实际上并没有链接到音频的部分..（所以没有“点击这个播放这个部分”）。

我推断可以通过例如： http://thelink.com/timeline?startms=%221600326183999%22 : http://thelink.com/timeline?startms=%221600326183999%22链接到呼叫的特定部分。 并且所有元素都有一个名为“startms”的属性，例如：

<div class="segment-item" startms="1600326183999"></div>

有什么方法可以让我使用“segment-item”类遍历页面中的所有元素，并将带有它们各自“startms”值的值的 href="" 添加到链接（ http://thelink.com/timeline?startms=%22TheValueHere%22 ）。

最后，由于我无法为此在浏览器中构建插件，是否可以制作一个可以粘贴到控制台中以便在我需要时易于使用的片段？ 有没有其他建议可以让这样的东西很容易使用，而无需为 chrome 制作或使用插件？

Answer 1

如果要将链接添加到元素，则应该像这样添加

const elements = document.getElementsByClassName("segment-item")
    for (element of elements) {
        const a = document.createElement("a")
        a.href = `http://thelink.com/timeline?startms=%22${element.getAttribute("startms")}%22`
        a.innerText = "LINK NAME"

        element.appendChild(a)
    }

Answer 2

添加基于元素属性的链接是这样的

const elements = document.getElementsByClassName("segment-item")
for (element of elements) {
    element.innerHTML = `<a href="http://thelink.com/timeline?startms=%22${element.getAttribute("startms")}%22">
                              Link name
                         </a>`
}