创建和删除<；部门>；Javascript中的元素 函数标签单击（）{ 函数makeDivId（id）{ 返回id+“\u div”； }; var div=this.getElementById（makeDivId（this.id））； 如有需要（分区）{ div.parentNode.removeChild（div）； }否则{ div=document.createElement（“div”）； div.innerHTML=“欢迎”； div.id=makeDivId（this.id）； 这名儿童（div）； } } 浏览器 游戏机

在上面的示例中，我试图在单击标签时创建一个

div

元素，并在再次单击标签时删除创建的

div

元素，但它不起作用

我的建议是不要使用javascript添加div，而是在单击时更改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>

函数标签单击（）{
函数makeDivId（id）{
返回id+“\u div”；
};
//var div=this.getElementById（makeDivId（this.id））；
if（document.getElementById（“divID”）.style.visibility==“visible”）{
document.getElementById（“divID”）.style.visibility=“hidden”；
}否则{
document.getElementById（“divID”）.style.visibility=“hidden”；
}
}
浏览器
游戏机

您的代码中有几个问题：

• 在事件处理程序函数

  中内联分配事件处理程序（
  label onclick=“…”
  ）时，此

  将指向全局对象（

  窗口

  ）。您可以将此作为参数传递给函数

<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>

• 如果找不到元素，某些浏览器将在将

  getElementById（）

  的结果分配给变量时失败（如果我错了，有人会纠正我）

类似这样的方法会奏效：

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> 

功能标签单击（me）{
var makeDivId=函数（id）{
返回id+“\u div”；
};
var-div；
if（document.getElementById（makeDivId（me.id）））{
div=document.getElementById（makeDivId（me.id））；
div.parentNode.removeChild（div）；
}否则{
div=document.createElement（“div”）；
div.innerHTML=“欢迎”；
div.id=makeDivId（me.id）；
我是一名儿童(分区),；
}
}
浏览器
游戏机

您试图用“this”关键字代替“document”，因为“this”指向labelOnClick函数，所以该关键字不起作用

<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>

功能标签单击（e）
{
函数makeDivId（id）
{
返回id+“\u div”；
};
var div=document.getElementById（makeDivId（this.id））；
如有需要（分区）
{
div.parentNode.removeChild（div）；
}
其他的
{
div=document.createElement（“div”）；
div.innerHTML=“欢迎”；
div.id=makeDivId（this.id）；
var元素=e.目标；
element.parentNode.insertBefore（div，element.nextSibling）；
}
}
浏览器
游戏机

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

---

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

您有两个问题，第一个问题是

getElementById

是

文档

的方法，而不是

HTMLElement

。第二个问题是该关键字的使用不正确。使用内联事件时，您需要将其作为参数传递，因为

此

将引用

窗口

。也许您也应该将div添加到标记中。我怀疑这实际上不能满足OP的要求（显示附加到右标签上的div）。是的，div应该添加到标记中，我忘了提到这一点。@thuk如果您对这里的任何答案感到满意，您可以通过单击答案左侧的勾号来接受一个答案。上面的代码没有在我的系统上运行。可能是什么问题。@thuk请描述

没有运行

和

我的系统

。请务必查看我的JSFIDLE。当我将上述代码复制到记事本并在googlechrome中运行时，它没有运行。它正在jsfiddle.et中运行……。@thuk-Hm是的，@circurbreed似乎是对的。将

me.getElementById

更改为

document.getElementById

。对DOM遍历和修改使用jQuery的时间过长：）。