如何清除JS创建的DIV?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何清除JS创建的DIV?相关的知识,希望对你有一定的参考价值。
用 var oDiv = document.createElement("DIV");
动态创建的DIV,创建之后,如果想用JS清除,就是把这个DIV删除掉。怎么清除呢?
function addDiv(w,h)
deleteDiv();
//创建一个div
var my = document.createElement("divCell");
//添加到页面
document.body.appendChild(my);
my.style.position="absolute";
//通过样式指定x坐标(随机数0~450)
my.style.top= Math.round(Math.random()*450);
//通过样式指定y坐标(随机数0~700)
my.style.left= Math.round(Math.random()*700);
//通过样式指定宽度
my.style.width=w;
//通过样式指定高度
my.style.height=h;
//通过样式指定背景颜色,,若是背景图片 例为my.style.backgroundImage="url(img/3.jpg)"
my.style.backgroundColor="#ffffcc";
//添加div的内容
//my.innerhtml=i++;
//设置样式透明
my.style.filter = "alpha(opacity=50)";
//设置ID
my.id = "divCell";
function deleteDiv()
var my = document.getElementById("divCell");
if (my != null)
my.parentNode.removeChild(my);
参考技术A 清除某个元素 最好用 元素.parent.removeChildNode(元素); 这个方式最好
所以你的问题可以通过以下的语句解决
oDiv.parent.removeChildNode(oDiv); 参考技术B document.removeChild("oDiv");
document.remove("oDiv");
这两个你试试哪个行本回答被提问者采纳
如何在没有 innerHTML = ""; 的情况下清除 div 的内容
【中文标题】如何在没有 innerHTML = ""; 的情况下清除 div 的内容【英文标题】:How do I clear the contents of a div without innerHTML = ""; 【发布时间】:2011-06-30 18:36:19 【问题描述】:我有一个由 JS 创建的 DOM 元素填充的 div,
我希望在 JS 函数重复时清除 div,但是我听说使用 document.getElementById('elName').innerHTML = "";
不是一个好主意,
清除 div 内容的有效替代方法是什么?
【问题讨论】:
您从哪里听到的?有链接吗? 通过字符串操作 DOM 不是一个坏主意吗? @Myles:让浏览器再次解析一个字符串可能比给它一个 DOM 树要慢(这就是为什么人们会建议不只是粘贴字符串),但这不适用于这里,因为显而易见的原因。 尽管''
是一个字符串,但它是一种“用字符串操作DOM”的极其轻量级的方式。对于编码人员来说,它高效、定义明确且直观。我敢说这比在循环中删除孩子要快得多。
实际上这可能是个问题,因为 IE 将 innerHTML 关联为某些元素的只读属性,并且可能引发讨厌的“未知运行时错误”。所以你最好小心使用它。另见This answer
【参考方案1】:
如果你有 jQuery,那么:
$('#elName').empty();
否则:
var node = document.getElementById('elName');
while (node.hasChildNodes())
node.removeChild(node.firstChild);
【讨论】:
【参考方案2】:Prototype 方式为Element.update()
例如:
$('my_container').update()
【讨论】:
【参考方案3】:如果您使用 jQuery,请查看 .empty()
方法 http://api.jquery.com/empty/
【讨论】:
【参考方案4】:你可以遍历它的子节点然后删除,即。
var parDiv = document.getElementById('elName'),
parChildren = parDiv.children, tmpChildren = [], i, e;
for (i = 0, e = parChildren.length; i < e; i++)
tmpArr.push(parChildren[i]);
for (i = 0; i < e; i++)
parDiv.removeChild(tmpChildren[i]);
如果您使用的是 jQuery,请使用 .empty()
。
这只是一种替代解决方案,while
循环更加优雅。
【讨论】:
我不确定,但只是觉得那行不通。删除节点后索引是否更新? 确实如此。使用 i-- 从长度循环到 0。 我不记得了,但我认为您可能是对的。不管怎样,我都会使用 Alnitak 的while
循环,它看起来更干净。【参考方案5】:
您可以重新定义 .innerHTML。在 Firefox 和 Chrome 中,使用 .innerHTML = "" 清除元素不是问题。在 IE 中是这样,因为任何子元素都会立即被清除。在这个例子中,“mydiv.innerHTML”通常会返回“undefined”。 (没有重新定义,即在 IE 11 中截至本文创建之日)
if (/(msie|trident)/i.test(navigator.userAgent))
var innerhtml_get = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").get
var innerhtml_set = Object.getOwnPropertyDescriptor(HTMLElement.prototype, "innerHTML").set
Object.defineProperty(HTMLElement.prototype, "innerHTML",
get: function () return innerhtml_get.call (this),
set: function(new_html)
var childNodes = this.childNodes
for (var curlen = childNodes.length, i = curlen; i > 0; i--)
this.removeChild (childNodes[0])
innerhtml_set.call (this, new_html)
)
var mydiv = document.createElement ('div')
mydiv.innerHTML = "test"
document.body.appendChild (mydiv)
document.body.innerHTML = ""
console.log (mydiv.innerHTML)
http://jsfiddle.net/DLLbc/9/
【讨论】:
以上是关于如何清除JS创建的DIV?的主要内容,如果未能解决你的问题,请参考以下文章