javascript - 在 Javascript 中创建和删除 元素

Question

function labelOnClick () {
    function makeDivId(id) {
        return id + "_div";
    };

    var div = this.getElementById(makeDivId(this.id));

    if (div) {
        div.parentNode.removeChild(div);
    } else {
        div = document.createElement("div");
        div.innerHTML = "welcome";
        div.id = makeDivId(this.id);

        this.appendChild(div);
    }
}




<label id="1" onclick="labelOnClick()" > BROWSER </label>
<label id="2" onclick="labelOnClick()"> GAMING CONSOLE </label>

在上面的示例中，我试图在单击标签时创建一个 div 元素，并在再次单击标签时删除创建的 div 元素，但是它不工作。

Answer 1

你的代码有几个问题:

• 在事件处理函数 this 内分配内联事件处理程序 (label onclick="...") 时，将指向全局对象 (窗口)。您可以将 this 作为参数传递给函数。

• 如果没有找到元素，某些浏览器在将 getElementById() 的结果分配给变量时会失败(如果我错了请纠正我)。

  <

像这样的东西会起作用:

<script>
function labelOnClick (me) {
    var makeDivId=function (id) {
        return id + "_div";
    };
    var div;

    if (document.getElementById(makeDivId(me.id))) {
        div=document.getElementById(makeDivId(me.id));
        div.parentNode.removeChild(div);
    } else {
        div = document.createElement("div");
        div.innerHTML = "welcome";
        div.id = makeDivId(me.id);

        me.appendChild(div);
    }
}
</script>

<label id="1" onclick="labelOnClick(this)" > BROWSER </label>
<label id="2" onclick="labelOnClick(this)"> GAMING CONSOLE </label>

jsFiddle Demo