Geek asks and answers

Creating and deleting a <div> element in javascript

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>

In the above example, I am trying to create an element divby clicking on a shortcut and deleting the created element divby clicking the label again, but it does not work.

+3
source share
3 answers

There are several problems in your code:

  • When assigning inline ( label onclick="...") event handlers, a thisglobal object ( window) will be specified inside the event handler function . You can pass thisas an argument to a function.

  • Some browsers will not work when assigning a variable to a getElementById()variable if no element is found (someone will correct me if I am wrong).

- :

<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

+4

, div, javascript, 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>
+1

"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" (, -). - , jQuery Prototype.

, , div , ( ).

+1

More articles:


All Articles