Замена узлов DOM новыми узлами.

Question

У меня есть коллекция узлов DOM, которые я хотел бы заменить новыми узлами DOM. Из-за того, как я передаю информацию в функцию, у меня есть только переменная с именем collection, которая является объектом, полным HtmlTableRowElements, и я хотела бы заменить ее новой переменной с именем Rows.

Вот что у меня есть

var parent = collection[0].parentNode;
parent.innerHTML = "";
parent.appendChild(rows);

однако это дает мне странную ошибку.

необработанное исключение: [Exception ... "Не удалось преобразовать аргумент JavaScript arg 0 [nsIDOMHTMLTableSectionElement.appendChild]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" местоположение: "JS frame :: * :: :: 1010 строка 103 "данные: нет]

Так что я тоже попробовал

collection[0].parentNode.innerHTML = "";
collection[0].parentNode.appendChild(rows);

, который возвращает

collection [0] .parentNode имеет значение null

Я понимаю, почему второй вариант возвращает ошибку. Я думаю, что первый вариант возвращает ошибку, потому что я удалил элемент, на который ссылается переменная.

Я начинаю думать, что поиск родителя и замена его содержимого не способ сделать это.

любая помощь?

Answer 1

Что находится в rows? Я не могу сказать из вашего вопроса

• Если это массив, поместите содержимое в фрагмент документа и добавьте:

  var fragment = document.createDocumentFragment();
  for (var i = 0, l = rows.length; i < l, i++) {
      fragment.appendChild(rows[i]);
  }
  
  parent.appendChild(fragment);
  

  Поместить группу элементов во фрагмент документа быстрее, чем добавлять их к чему-либо в документе один за другим, и это хороший способ переносить коллекцию элементов (вместо массива).

• Если это строка, используйте innerHTML:

  parent.innerHTML = rows;
  

---

Когда вы звоните collection[0].parentNode.innerHTML = "", коллекция удаляется из документа. Он все еще существует только потому, что вы держитесь за него в переменной JavaScript, но у него больше нет родительского узла. Вы все еще должны быть в состоянии захватить parent заранее (как вы делаете в первом примере) и добавить к нему вещи:

var parent = collection[0].parentNode;
parent.innerHTML = "";
parent.appendChild(rows);

Answer 2

parent.innerHTML = ""; - это один из способов очистки содержимого.Затем вам нужно перебрать другие элементы и добавить их:

for(var i = 0, l = rows.length; i < l; i++) {
    parent.appendChild(row[i]);
}

Но на деле может быть проблематично добавлять новые строки таким образом.Может быть лучше использовать table.insertRow ^[MDN] .