создание и удаление <div>элемента в JavaScript - PullRequest
Новая
       25

создание и удаление <div>элемента в JavaScript

3 голосов
/ 27 мая 2011 
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 при повторном нажатии на метку, но он не работает.

Ответы [ 3 ]

4 голосов
/ 27 мая 2011

В вашем коде есть несколько проблем:

  • При назначении встроенных обработчиков событий (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

1 голос
/ 27 мая 2011

Вы пытаетесь использовать ключевое слово «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 для метки, и я угадал позиционирование (сразу после метки).

1 голос
/ 27 мая 2011

Мое предложение было бы не добавлять 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>
...