Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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.
Ответить с цитированием
  #2 (permalink)  
Старый 07.01.2017, 17:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Ramundo
Куда и как его добавить, чтобы я мог потом спокойно писать
после этого кода можно оба варианта:
elem.insertAdjacentHTML("beforeBegin", html)
//или 
Insert.before(elem, html)
Ответить с цитированием
  #3 (permalink)  
Старый 07.01.2017, 17:32
Аспирант
Отправить личное сообщение для Ramundo Посмотреть профиль Найти все сообщения от Ramundo
 
Регистрация: 07.03.2015
Сообщений: 47

О, сказка! Песня!
Кстати, я видел еще такую реализацию: https://learn.javascript.ru/article/...tAdjacentFF.js

Как ты считаешь, какая лучше из них?
Ответить с цитированием
  #4 (permalink)  
Старый 07.01.2017, 18:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Ramundo,
а зачем оно нужно сейчас?
http://caniuse.com/#search=insertAdjacentHTML
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
почему insertAdjacentHTML не работает в FF ? ravend Общие вопросы Javascript 5 22.07.2015 21:06
Кроссбраузерный .load() skuty jQuery 2 05.11.2014 17:05
Кроссбраузерный слайдер IE7+ modestes jQuery 3 21.06.2012 17:23
Как сделать кроссбраузерный вариант esto Общие вопросы Javascript 6 27.08.2011 18:43
Альтернатива insertAdjacentHTML в Mozilla FireFox ПавелЪ Общие вопросы Javascript 4 19.01.2009 01:22