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

Флэнаган Дэвид

Пример 15.6. Реализация метода

insertAdjacentHTML

с использованием свойства

innerHTML

// Этот модуль определяет метод Element.insertAdjacentHTML для броузеров,

// не поддерживающих его, а также определяет переносимые функции вставки HTML,

// имеющие более логичные

имена, чем имя insertAdjacentHTML:

// Insert.before, Insert.after, Insert.atStart, Insert.atEnd

var Insert = (function {

// Если элементы имеют собственный метод insertAdjacentHTML, использовать

// его в четырех функциях вставки HTML, имеющих более понятные имена,

if (document.createElement("div").insertAdjacentHTML) {

return {

before: function(e,h) {e.insertAdjacentHTML("beforebegin",h);},

after: function(e,h) {e.insertAdjacentHTML("afterend",h);},

atStart: function(e,h) {e.insertAdjacentHTML("afterbegin",h);},

atEnd: function(e,h) {e.insertAdjacentHTMLC'beforeend",h);}

};

}

// Иначе, в случае отсутствия стандартного метода insertAdjacentHTML,

// реализовать те же самые четыре функции вставки и затем использовать их

// в определении метода insertAdjacentHTML.

// Сначала необходимо определить вспомогательный метод, который принимает

// строку с разметкой HTML и возвращает объект DocumentFragment,

// содержащий разобранное представление этой разметки

function fragment(html) {

var elt = document.createElement("div"); // Пустой элемент

var frag = document.createDocumentFragment; // Пустой фрагмент

elt.innerHTML = html; // Содержимое элемента

while(elt.firstChild) // Переместить все узлы

frag.appendChild(elt.firstChild); // из elt в frag

return frag; //

И вернуть frag

}

var Insert = {

before: function(elt, html) {

elt.parentNode.insertBefore(fragment(html), elt):

},

after: function(elt, html) {

elt.parentNode.insertBefore(fragment(html),elt.nextSibling);

},

atStart: function(elt, html) {

elt.insertBefore(fragment(html), elt.firstChild);

},

atEnd: function(elt, html) { elt.appendChild(fragment(html)); }

};

// Реализация метода insertAdjacentHTML на основе функций выше

Element.prototype.insertAdjacentHTML = function(pos, html) {

switch(pos.toLowerCase) {

case "beforebegin": return Insert.before(this, html);

case "afterend": return Insert.after(this, html);

case "afterbegin": return Insert.atStart(this, html);

case "beforeend": return Insert.atEnd(this, html);

}

};

return Insert; // Вернуть четыре функции вставки

});

15.7. Пример: создание оглавления

Пример 15.7 показывает, как динамически создавать оглавление документа. Он демонстрирует многие концепции работы с документом, описанные в разделах выше: выбор элементов, навигация по документу, установка атрибутов элементов, установка свойства

innerHTML

и создание новых узлов и вставку их в документ. Пример снабжен большим количеством комментариев, которые призваны облегчить понимание программного кода.

Пример 15.7. Автоматическое создание оглавления документа