Javascript 声明对象超出范围

我有这个功能：

function createElement() {
    var element1 = document.createElement("div");
    element1.id = "el1";
    //...
}

问题是，当我创建另一个函数时，比如说

editElement（）

，我无法从新函数中访问

element1

，因为它超出了范围

---

我可以在这些函数之外声明

element1

，但问题是

element1

总是被声明。但是我可能只需要在部分情况下创建元素，仅当用户按下按钮并调用

creadeElement（）

时。我想保存系统资源并仅在我确实需要时调用

document.createElement（“div”）

，但我还需要从多个函数中访问它。有办法吗？

相反，请执行以下操作：

var element1 = null;
function createElement() {
    element1 = document.createElement("div");
    element1.id = "el1";
    //...
}

function useElement() {
    if(!element1)createElement()
    //...
}

elementHandler.createElement();
elementHandler.editElement();

这将使元素在createElement函数之外可用，但在需要之前不会创建元素。

您可以使用对象：

var elementHandler = {
    createElement: function() {
        this.element1 = document.createElement("div");
        this.element1.id = "el1";
        // ...
    },
    editElement: function() {
        // Use this.element1 here...
    }
};

您可以这样调用

createElement

和

editElement

：

var element1 = null;
function createElement() {
    element1 = document.createElement("div");
    element1.id = "el1";
    //...
}

function useElement() {
    if(!element1)createElement()
    //...
}

elementHandler.createElement();
elementHandler.editElement();

（或者您可以将它们称为

create

和

edit

，因为不需要到处重复“element”一词……）

如果将它们连接到事件，请确保调用它们时，

elementHandler

在调用中是

this

：

// Using an anonymous function
someElement.addEventListener("click", function() {
    elementHandler.createElement();
}, false);

// Or using ES5's `bind`
someElement.addEventListener("click", elementHandler.createElement.bind(elementHandler), false);

// *NOT* like this:
someElement.addEventListener("click", elementHandler.createElement, false);

---

您可以简单地将新元素分配给窗口，使其在全局范围内可用

function createElement() {
    window.element1 = document.createElement("div"); //Meke new element global.
    element1.id = "el1";
}

function useElement() {
    //now you can use element1 directly. as it is inside the global scope.
}

---

像这样动态地添加到dom是不好的做法，这是不好的design@theBigChalk你能详细说明一下吗？DOM操作是经常进行的，包括添加元素。@theBigChalk:你在说什么？为什么这是一个糟糕的做法？这是一个用户脚本。我无法访问html源代码，userscript/javascript是添加最初不存在的元素的唯一方法。