JavaScript. Подробное руководство, 6-е издание

   }(i)); // Присвоить значение і локальной переменной n
   }
  }

15.6.3. Удаление и замена узлов

Метод removeChild удаляет элемент из дерева документа. Но будьте внимательны: этот метод вызывается не относительно узла, который должен быть удален, а (как следует из фрагмента «child» в его имени) относительно родителя удаляемого узла. Этот метод вызывается относительно родителя и принимает в виде аргумента дочерний узел, который требуется удалить. Чтобы удалить узел n из документа, вызов метода должен осуществляться так:

  n.parentNode.removeChild(n);

Метод replaceChild удаляет один дочерний узел и замещает его другим. Этот метод должен вызываться относительно родительского узла. В первом аргументе он принимает новый узел, а во втором - замещаемый узел. Например, ниже показано, как заменить узел n текстовой строкой:

  n.parentNode.replaceChild(document.createTextNode("[ ИСПРАВЛЕНО ]"). n);

Следующая функция демонстрирует еще один способ применения метода replaceChild:

  // Замещает узел n новым элементом <b> и делает узел п его дочерним элементом,
  function embolden(n) {
   // Если вместо узла получена строка, интерпретировать ее как значение
   // атрибута id элемента
   if (typeof n == "string") n = document.getElementByld(n);
   var parent = n.parentNode; // Ссылка на родителя элемента n
   var b = document.сreateElement("b"); // Создать элемент <b>
   parent.replaceChild(b, n); // Заменить n элементом <b>
   b.appendChild(n); // Сделать n дочерним элементом элемента <b>
  }

В разделе 15.5.1 было представлено свойство outerHTML элементов и говорилось, что оно не реализовано в текущей версии Firefox. Пример 15.5 демонстрирует, как можно реализовать это свойство в Firefox (и в любом другом броузере, поддерживающем свойство innerHTML, позволяющем расширять объект-прототип Element.prototype и имеющем методы определения методов доступа к свойствам). Здесь также демонстрируется практическое применение методов removeChild и cloneNode.

Пример 15.5. Реализация свойства outerHTML с помощью свойства innerHTML

  И Реализация свойства outerHTML для броузеров, не поддерживающих его.
  // Предполагается, что броузер поддерживает свойство innerHTML, возможность
// расширения Element.prototype и позволяет определять методы доступа к свойствам.
  (function {
   // Если свойство outerHTML уже имеется - просто вернуть управление
   if (document.createElement("div").outerHTML) return;

   // Возвращает окружающую разметку с содержимым элемента,
   // на который указывает ссылка this
   function outerHTMLGetter {

var container = document.createElement("div"); // Фиктивный элемент

   container.appendChild(this.cloneNode(true)); // Копировать this
   // в фиктивный элемент
   return container.innerHTML; // Вернуть содержимое
   // фиктивного элемента
   }

   // Замещает указанным значением value содержимое элемента, на который
   // указывает ссылка this, вместе с окружающей разметкой HTML
   function outerHTMLSetter(value) {
   // Создать фиктивный элемент и сохранить в нем указанное значение
   var container = document.createElement("div");
   container.innerHTML = value;

   // Переместить все узлы из фиктивного элемента в документ
   while(container.firstChild) // Продолжать, пока в контейнере
   // не останется дочерних элементов
   this.parentNode.insertBefore(container.firstChild, this);

   // И удалить замещаемый узел
   this.parentNode.removeChild(this);
   }

   // Использовать эти две функции в качестве методов чтения и записи свойства outerHTML
   // всех объектов Element. Использовать метод Object.defineProperty, если имеется,
   // в противном случае использовать __defineGetter__ и __defineSetter__.
   if (Object.defineProperty) {
   Object.defineProperty(Element.prototype,
   "outerHTML",
   { get: outerHTMLGetter,