Как добавить дочерний узел к определенной позиции

Question

Как я могу добавить childNode к определенной позиции в JavaScript?

Я хочу добавить childNode в 3-ю позицию в div. За ним находятся другие узлы, которые необходимо переместить назад (3 становится 4 и т. Д.)

Answer 1

Вы можете использовать .insertBefore():

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

Answer 2

Для этого у вас есть 3 варианта:

var insertedElement = parentElement.insertBefore(newElement, referenceElement);

в вашем случае вы можете поступить так же, как и на ответ Феликса Клинга

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>");

Answer 3

Чтобы вставить дочерний узел по определенному индексу

Упрощенно,

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)

Тад!

Знайте, когда расширение аборигенов может быть проблематично