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

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

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

Ответы

Ответ 1

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

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

Ответ 2

Для этого у вас есть 3 варианта .insertBefore(),.insertAdjacentElement() или .insertAdjacentHtml()

.insertBefore()

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

Ответ 3

Вставить дочерний элемент node в определенный индекс

Упрощенный,

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)

Тада!

Помните, что при расширении аборигенов может быть неприятно