当前位置：文江博客话题详情

如何在没有innerHTML =“”的情况下清除div的内容

发布于 2024-10-18 20:35:20 字数 186 浏览 10 评论 0原文

我有一个由 JS 创建的 DOM 元素填充的 div，

我希望在 JS 函数重复时清除该 div，但是我听说使用 document.getElementById('elName').innerHTML = "";< /code> 不是一个好主意，

清除 div 内容的有效替代方法是什么？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

满天都是小星星 2024-10-25 20:35:20

如果你有 jQuery 那么：

$('#elName').empty();

否则：

var node = document.getElementById('elName');
while (node.hasChildNodes()) {
    node.removeChild(node.firstChild);
}

If you have jQuery then:

$('#elName').empty();

Otherwise:

var node = document.getElementById('elName');
while (node.hasChildNodes()) {
    node.removeChild(node.firstChild);
}

回复收藏 0 原文

望笑 2024-10-25 20:35:20

原型方式是 Element.update() 例如：

$('my_container').update()

The Prototype way is Element.update() e.g.:

$('my_container').update()

回复收藏 0 原文

只有一腔孤勇 2024-10-25 20:35:20

如果您使用 jQuery，请查看 .empty() 方法 http:// /api.jquery.com/empty/

回复收藏 0 原文

深爱不及久伴 2024-10-25 20:35:20

第2022章答案：

使用element.replaceChildren()

清空节点
ReplaceChildren() 提供了一种非常方便的机制来清空节点的所有子节点。您可以在父节点上调用它，而不指定任何参数：

Doc< /a>

回复收藏 0 原文

给妤﹃绝世温柔 2024-10-25 20:35:20

您可以循环遍历其子项并删除，即。

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 循环更加优雅。

You could loop through its children and remove then, ie.

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]);
    }

Or use .empty() if you are using jQuery.
This is just an alternative solution, a while loop is much more elegant.

回复收藏 0 原文

太阳哥哥 2024-10-25 20:35:20

您可以重新定义.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/

You can redefine .innerHTML. In Firefox and Chrome, it's not a problem to clear the elements with .innerHTML = "". In IE, it is, because any child elements are immediately cleared. In this example, "mydiv.innerHTML" would normally return "undefined". (without the redefine, that is, and in IE 11 as of the date of this post creation)

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/

回复收藏 0 原文

~没有更多了~