web-dev-qa-db-ja.com

子ノードを特定の位置に追加する方法

Javascriptの特定の位置にchildNodeを追加するにはどうすればよいですか？

Divの3番目の位置にchildNodeを追加したい。後方に移動する必要がある他のノードがあります（3が4になるなど）。

javascriptdomparent-child
48
Jarco

.insertBefore() を使用できます。

parentElement.insertBefore(newElement, parentElement.children[2]);
75
Felix Kling

これには、3つのオプション.insertBefore（）、. insertAdjacentElement（）、または.insertAdjacentHtml（）があります。

.insertBefore()

_var insertedElement = parentElement.insertBefore(newElement, referenceElement);
_

あなたの場合、あなたは Felix Kling answer

_var insertedElement = parentElement.insertBefore(newElement, parentElement.children[2]);
_

.insertAdjacentElement()

_referenceElement.insertAdjacentElement (where, newElement);
_

あなたの場合、それは

_parentElement.children[1].insertAdjacentElement("afterEnd", newElement);
_

.insertAdjacentHTML()

_referenceElement.insertAdjacentElement (where, newElementHTML);
_

あなたの場合、それは

_parentElement.children[1].insertAdjacentElement("afterEnd", "<td>newElementHTML</td>");
_
27
MauricioJuanes

特定のインデックスに子ノードを挿入するには

簡略化、

Element.prototype.insertChildAtIndex = function(child, index) {
  if (!index) index = 0
  if (index >= this.children.length) {
    this.appendChild(child)
  } else {
    this.insertBefore(child, this.children[index])
  }
}

その後、

var child = document.createElement('div')
var parent = document.body
parent.insertChildAtIndex(child, 2)

多田！

ネイティブを拡張するときは注意してください 面倒になる可能性があります

6
Leonard Pauli