dom events - Creating and removing <div> element in Javascript - Stack Overflow

admin管理员组

文章数量:1292620

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 = "wele";
        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'm trying to create a div element when a label is clicked and remove the created div element when the label is clicked again, but it's not working.

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 = "wele";
        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'm trying to create a div element when a label is clicked and remove the created div element when the label is clicked again, but it's not working.

• javascript
• dom-events
• dom-manipulation

Share Improve this question Follow edited Mar 6, 2021 at 13:12 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked May 27, 2011 at 12:17 thukthuk 27133 gold badges77 silver badges2121 bronze badges 1

• You had two issues, the first problem is that getElementById is a method of document, not HTMLElement. The second is incorrect use of the this keyword. Using inline events, you need to pass it as a argument, as this will refer to the window. – circusbred Commented May 27, 2011 at 12:31

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You have several problems in your code:

• When assigning event handlers inline (label onclick="...") inside the event handler function this will point to the global object (window). You can pass this as an argument to the function.

• Certain browsers will fail when assigning the result of getElementById() to a variable if no element is found (someone correct me if I'm wrong).

Something like this would work:

<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 = "wele";
        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

My suggestion would be to not add the div using the javascript, but to change the div tag's visibility style property on click..

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> 

You are trying to use the "this" keyword in place of "document", which does not work since "this" is pointing to the labelOnClick function.

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 = "wele";
        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>

I wrote this assuming you are using something that supports the "target" property of the event object (e.g. not internet explorer). If you need cross browser support, you can do it manually or use a framework like jQuery or Prototype.

The way the original code was written, I assumed that you wanted a div per label and I guessed at the positioning (immediately following the label).

本文标签： dom eventsCreating and removing ltdivgt element in JavascriptStack Overflow