在 Javascript 中创建和删除 <div> 元素答案

【问题标题】：Creating and removing <div> element in Javascript在 Javascript 中创建和删除 <div> 元素
【发布时间】：2011-09-03 08:58:01
【问题描述】：

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

【问题讨论】：

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

标签： javascript dom-events dom-manipulation

【解决方案1】：

您的代码中有几个问题：

当在事件处理函数this内内联分配事件处理程序（label onclick="..."）时，将指向全局对象（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

【讨论】：

@thuk 如果您对这里的任何答案感到满意，您可以通过单击答案左侧的勾号来接受。
以上代码没有在我的系统上运行。可能是什么问题。
@thuk 请描述not running 和my system。一定要看看我的 jsFiddle。
当我将上述代码复制到记事本并在 googlechrome 中运行时，它没有运行。它正在 jsfiddle.et 中运行........
@thuk 嗯，是的，@circusbred 似乎是对的。将me.getElementById 更改为document.getElementById。使用 jQuery 进行 DOM 遍历和修改时间过长 :).

【解决方案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>

【讨论】：

也许您也应该将 div 添加到标记中。我怀疑这实际上不会做 OP 想要的（显示附加到正确标签的 div）。
没错，应该把 div 添加到标记中，我忘了说。

【解决方案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>

我写这篇文章是假设您使用的东西支持事件对象的“目标”属性（例如，不是 Internet Explorer）。如果需要跨浏览器支持，可以手动完成，也可以使用 jQuery 或 Prototype 等框架。

按照原始代码的编写方式，我假设您希望每个标签都有一个 div，并且我猜测了定位（紧跟标签）。

【讨论】：