Показать сообщение отдельно
  #1 (permalink)  
Старый 07.01.2017, 16:50
Аспирант
Отправить личное сообщение для Ramundo Посмотреть профиль Найти все сообщения от Ramundo
 
Регистрация: 07.03.2015
Сообщений: 47

Кроссбраузерный insertAdjacentHTML
В 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)?

Последний раз редактировалось Ramundo, 07.01.2017 в 16:53.
Ответить с цитированием