javascript - 如何使用 JS 将内容附加到两个不同的 Div？

Question

因此，再次使用 javascript，我尝试将 JSON 内容附加到两个封闭的 Div。由于某种原因，它只出现在最后的 appendChild 集合中。 这是代码的相关部分:

const text = document.createElement('div')
counter = 0
data.forEach(element => {
    counter ++
    const dot = document.createElement('div')
    dot.className = 'dot'
    if(counter === 1){
        dot.classList.add('active')
    }
    dot.addEventListener('click',()=>{
        text.textContent = element.content
    })

    document.querySelector('#dots-mobile').appendChild(dot)
    document.querySelector('#dots').appendChild(dot)


});

在这种情况下，内容将附加到#dots。如果我切换它，它将附加到#dots-mobile

我知道我不是专家，所以欢迎任何建议:) 谢谢!

Answer 1

您只有一个 dot 元素。第二次使用它作为 appendChild 的参数移动它从第一个父级到第二个。

您需要创建两个 点 元素。您可以通过 cloneNode 方便地克隆一个元素，但您需要单独附加事件处理程序:

const text = document.createElement('div')
counter = 0
data.forEach(element => {
    counter ++
    const dot1 = document.createElement('div')
    dot1.className = 'dot'
    if(counter === 1){
        dot1.classList.add('active')
    }
    // *** Create one handler for both elements
    const handler = ()=>{
        text.textContent = element.content
    }
    // *** Use the handler for dot1
    dot1.addEventListener('click', handler)
    // *** Create dot2, use the handler for it as well
    const dot2 = dot1.cloneNode(true)
    dot2.addEventListener('click', handler)

    document.querySelector('#dots-mobile').appendChild(dot1) // *** Use dot1
    document.querySelector('#dots').appendChild(dot2)        // *** Use dot2
});

(我试着坚持你的编码风格，没有 ; 等)

---

旁注:使用 document.getElementById("id") 可能比使用 document.querySelector('#id') 更好，因为后者需要解析 CSS 选择器.