web-dev-qa-db-ja.com

innerHTML = ""なしでdivのコンテンツをクリアするにはどうすればよいですか。

JSが作成したDOM要素で埋められたdivがあり、

JS関数の繰り返しでdivをクリアする必要がありますが、document.getElementById('elName').innerHTML = "";を使用するのは良い考えではないと聞きました。

Divのコンテンツをクリアするためにこれを行う有効な代替手段は何ですか？

javascripthtmldomdom-manipulation
26
Myles Gray

JQueryがある場合：

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

さもないと：

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

プロトタイプの方法はElement.update()です。例：

$('my_container').update()
4
Antonio Bardazzi

JQueryを使用している場合は、.empty()メソッドをご覧ください http://api.jquery.com/empty/

2
Rob Stevenson-Leggett

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

1
Agamemnus

その子をループして削除することができます。

_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ループはよりエレガントです。

0
Tom