如何解决在JavaScript中创建和删除<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>
在上面的示例中,我试图在单击标签时创建一个div
元素,并在再次单击该标签时删除创建的div
元素,但是它不起作用。
解决方法
您的代码中有几个问题:
当在事件处理程序函数ѭ4inside内部分配事件处理程序内联(
label onclick=\"...\"
)时,它将指向全局对象(window
)。您可以将this
作为参数传递给函数。
如果未找到任何元素,将ѭ7的结果分配给变量时,某些浏览器将失败(如果我错了,请纠正我)。
这样的事情会起作用:
<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演示
, 我的建议是不要使用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>
, 您试图使用\“ 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,然后我猜到了位置(紧随标签之后)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。