在 javascript 中创建和删除 <div> 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6152132/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
creating and removing <div> element in javascript
提问by thuk
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'm trying to create a divelement when a label is clicked and remove the created divelement when the label is clicked again, but it's not working.
在上面的例子中，我试图在div单击标签时创建一个元素，并在div再次单击标签时删除创建的元素，但它不起作用。
回答by kapa
You have several problems in your code:
您的代码中有几个问题：
When assigning event handlers inline (
label onclick="...") inside the event handler functionthiswill point to the global object (window). You can passthisas 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).
当
label onclick="..."在事件处理函数中内联 ( )分配事件处理程序时，this将指向全局对象 (window)。您可以将this参数作为参数传递给函数。getElementById()如果没有找到元素，某些浏览器在将结果分配给变量时会失败（如果我错了，有人会纠正我）。
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 = "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>
回答by Heshan Perera
My suggestion would be to not add the div using the javascript, but to change the div tag's visibility style property on click..
我的建议是不要使用 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>
回答by junkyspace
You are trying to use the "this" keyword in place of "document", which does not work since "this" is pointing to the labelOnClick function.
您正在尝试使用“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>
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.
我写这个假设你使用的东西支持事件对象的“目标”属性（例如不是 Internet Explorer）。如果您需要跨浏览器支持，您可以手动完成，也可以使用 jQuery 或 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).
原始代码的编写方式，我假设你想要每个标签一个 div 并且我猜测定位（紧跟在标签之后）。
