在JavaScript中创建和删除<div>元素

问题描述

|

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

元素，但是它不起作用。     

解决方法

        您的代码中有几个问题： 当在事件处理程序函数ѭ4inside内部分配事件处理程序内联（

label onclick=\"...\"

）时，它将指向全局对象（

window

）。您可以将

this

作为参数传递给函数。 如果未找到任何元素，将ѭ7的结果分配给变量时，某些浏览器将失败（如果我错了，请纠正我）。 这样的事情会起作用：

<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演示     ,        我的建议是不要使用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> 

    ,        您试图使用\“ 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，然后我猜到了位置（紧随标签之后）。