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>`
}