Question

因此，再次尝试使用javascript，我试图将JSON内容附加到两个封闭的Divs中。由于某种原因，它仅出现在最后的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的参数，将其从其第一个父级移至第二个。

您需要创建两个 dot元素。您可以通过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选择器。

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

1 个答案: