如何在JavaScript中访问另一个函数内创建的DOM元素？

你可以直接使用以下两种常见方案实现需求： #

方案1：创建元素时直接绑定事件 #

你在createDataset函数内部已经拿到了新创建按钮的DOM实例，直接给实例绑定点击事件即可，不需要全局变量或额外的ID选择器，实现逻辑最简单。

修改后的完整JS代码如下：

document.getElementById("create-btn").addEventListener("click",createDataset)

function createDataset(){
    // 避免重复生成按钮
    if(document.getElementById("json-btn")) return

    var jsonBtn = document.createElement("Button")
    jsonBtn.setAttribute("id", "json-btn")
    jsonBtn.innerHTML = "JSON"
    // 直接绑定JSON按钮的点击事件
    jsonBtn.addEventListener("click", jsonButton)
    document.body.appendChild(jsonBtn)
    
    var csvBtn = document.createElement("Button")
    csvBtn.innerHTML = "CSV"
    // 直接绑定CSV按钮的点击事件
    csvBtn.addEventListener("click", csvButton)
    document.body.appendChild(csvBtn)
    
}

function jsonButton(){
    // 修正原代码的变量名错误
    var browseBtn = document.createElement("Button")
    browseBtn.innerHTML = "Browse Files"
    document.body.appendChild(browseBtn)
}

function csvButton(){
    var browseCsvBtn = document.createElement("Button")
    browseCsvBtn.innerHTML = "Browse Files"
    document.body.appendChild(browseCsvBtn)
}

方案2：事件委托 #

如果你需要处理大量动态生成的元素、或者不方便在创建时绑定事件，可以把事件绑定在公共父元素（比如document.body）上，通过判断点击元素的特征触发对应逻辑，后续新增的同类型元素无需重复绑定也能生效。

示例代码如下：

document.getElementById("create-btn").addEventListener("click",createDataset)
// 给父级绑定点击事件，委托处理子元素的点击
document.body.addEventListener("click", function(e){
    // 判断点击的是JSON按钮
    if(e.target && e.target.innerHTML === "JSON"){
        jsonButton()
    }
    // 判断点击的是CSV按钮
    if(e.target && e.target.innerHTML === "CSV"){
        csvButton()
    }
})

function createDataset(){
    if(document.getElementById("json-btn")) return
    var jsonBtn = document.createElement("Button")
    jsonBtn.setAttribute("id", "json-btn")
    jsonBtn.innerHTML = "JSON"
    document.body.appendChild(jsonBtn)
    
    var csvBtn = document.createElement("Button")
    csvBtn.innerHTML = "CSV"
    document.body.appendChild(csvBtn)
    
}

function jsonButton(){
    var browseBtn = document.createElement("Button")
    browseBtn.innerHTML = "Browse Files"
    document.body.appendChild(browseBtn)
}

function csvButton(){
    var browseCsvBtn = document.createElement("Button")
    browseCsvBtn.innerHTML = "Browse Files"
    document.body.appendChild(browseCsvBtn)
}

现有代码注意点 #

• 原jsonButton函数存在变量名错误，声明的变量是browseJsonBtn，后续使用的是未定义的browseBtn，已在上述代码中修正
• 新增了重复创建判断逻辑，避免多次点击主按钮重复生成相同按钮

内容的提问来源于stack exchange，提问作者user15269714