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. Автоматическое создание оглавления документа
Поделиться:
Популярные книги
Воплощение Похоти
1. Воплощение Похоти
Фантастика:
юмористическое фэнтези
попаданцы
рпг
аниме
5.00
рейтинг книги
Двойник Короля 5
5. Двойник Короля
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Последний Паладин. Том 12
12. Путь Паладина
Фантастика:
аниме
фэнтези
попаданцы
5.00
рейтинг книги
Эпоха Опустошителя. Том I
1. Вечное Ристалище
Фантастика:
фэнтези
попаданцы
аниме
5.00
рейтинг книги
Древесный маг Орловского княжества 9
9. Орловское княжество
Фантастика:
аниме
фэнтези
попаданцы
5.00
рейтинг книги
Кодекс Крови. Книга ХVI
16. РОС: Кодекс Крови
Фантастика:
попаданцы
аниме
фэнтези
5.00
рейтинг книги
Бояръ-Аниме. Газлайтер. Том 30
30. История Телепата
Фантастика:
альтернативная история
аниме
фэнтези
5.00
рейтинг книги
Князь Целитель 5
5. Князь Целитель
Фантастика:
боевая фантастика
городское фэнтези
аниме
фэнтези
фантастика: прочее
5.00
рейтинг книги
Беглец
1. Совсем не герой
Фантастика:
фэнтези
попаданцы
8.94
рейтинг книги
Кодекс Охотника. Книга ХХХ
30. Кодекс Охотника
Фантастика:
попаданцы
аниме
фэнтези
5.00
рейтинг книги
Запечатанный во тьме. Том 1. Тысячи лет кача
1. Хроники Арнея
Фантастика:
уся
эпическая фантастика
фэнтези
5.00
рейтинг книги
Убивать чтобы жить 5
5. УЧЖ
Фантастика:
боевая фантастика
космическая фантастика
рпг
5.00
рейтинг книги
Я все еще царь. Книга XXXI
31. Дорогой барон!
Фантастика:
юмористическое фэнтези
аниме
попаданцы
5.00
рейтинг книги
Последний Паладин. Том 11
11. Путь Паладина
Фантастика:
попаданцы
аниме
фэнтези
5.00