使用Javascript创建和删除<div>元素

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 元素，但它没有起作用。

- thuk

---

你有两个问题，第一个问题是 getElementById 是 document 的方法，而不是 HTMLElement 的方法。第二个问题是错误使用了 this 关键字。在使用内联事件时，你需要将其作为参数传递，因为 this 会引用 window。 - circusbred

Answer 1

您的代码存在以下几个问题：

• 当在事件处理函数内联赋值事件处理程序（label onclick="..."）时，this 将指向全局对象 (window)。您可以将 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

- kapa

---

@thuk 如果您对这里的任何答案感到满意，可以通过点击答案左侧的勾号来接受其中一个。 - kapa

以上代码在我的系统上无法运行。可能是什么问题？ - thuk

@thuk 请描述一下 not running 和 my system。同时请务必查看我的 jsFiddle。 - kapa

当我将上面的代码复制到记事本中并在Google Chrome中运行时，它无法运行。但是在jsfiddle.et中可以运行…… - thuk

@thuk 嗯，@circusbred 似乎是对的。将“me.getElementById”更改为“document.getElementById”。使用jQuery过于依赖DOM遍历和修改 :)。 - kapa

Answer 2

我的建议是不要使用JavaScript添加div，而是在单击时更改div标签的可见性样式属性。

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

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

    if (document.getElementById("divID").style.visibility == "visible") {
        document.getElementById("divID").style.visibility = "hidden";          
    } else {
        document.getElementById("divID").style.visibility = "hidden";  
    }
}

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

- Heshan Perera

---

也许你应该将div标签添加到标记中。我怀疑这实际上不会做出OP想要的效果（显示与右侧标签相连的div）。 - kapa

没错，这个 div 应该添加到标记中，我忘了提到。 - Heshan Perera

Answer 3

您试图在“this”关键字的位置使用“document”，但这是行不通的，因为“this”指向labelOnClick函数。

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

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

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

        var element = e.target;
        element.parentNode.insertBefore(div, element.nextSibling);
    }
}


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

我写这篇文章的时候假设你使用的是支持事件对象“target”属性的东西（例如不是Internet Explorer）。如果你需要跨浏览器支持，你可以手动实现或使用像jQuery或Prototype这样的框架。

原始代码的编写方式，我假设你想要每个标签一个div，并猜测了它们的位置（紧随标签之后）。

- junkyspace