В 6-м издании Подробного руководства Дэвида Флэнэгана есть пример кроссбраузерной функции insertAdjacentHTML.
/* Этот модуль определяет метод 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.insertAdjacentHTML("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; // Вернуть четыре функции вставки
}());
Я понял каждый отдельный блок, но ничего не понял в целом.
А именно - как использовать этот код вообще? То ли он добавляет функции Insert, то ли .insertAdjacentHTML...
Куда и как его добавить, чтобы я мог потом спокойно писать
elem.insertAdjacentHTML("beforeBegin", html)?
