Лучшее решение
Метод ввода будет выглядеть следующим образом:
inject: function(element, location) {
var el = Elements.from(this);
if($type(el) === 'array') var el = el.reverse();
return el.inject(element, location);
}
Давайте разберем это на части.
1) Elements.from(this) возьмет то, к чему применяется метод, и преобразует его в элементы:
var foo = "<p>Some text</p>";
var el = Elements.from(foo);
//el is equal to a p element.
var bar = "<div>First div</div><div>Second div</div>";
var el = Elements.from(bar);
//el is equal to an array containing 2 div elements
2) if($type(el) === 'array') проверяет, является ли el массивом.Если это так, то применяется .reverse() к эл.Это необходимо для введения элементов в правильном порядке.В противном случае они вводят, например, второй div первым и первый div секундой.Очевидно, что если el - всего лишь один элемент, нам не нужно менять его порядок.
3) Наконец, мы просто используем оригинальный метод inject, чтобы внедрить el в элемент, указанный в параметре element, в расположениеуказывается в параметре location.Если el - это массив элементов, все они будут просто вставлены.
Чтобы использовать эту функцию, мы должны добавить ее в качестве метода для строковых объектов.Для этого вы должны использовать implement():
String.implement({
inject: function(element, location) {
var el = Elements.from(this);
if($type(el) === 'array') var el = el.reverse();
return el.inject(element, location);
}
});
Это позволит вам использовать функцию ввода для любой переменной, содержащей строку.Убедитесь, что вы не помещаете это в событие domready, т.е. до window.addEvent('domready', function() { ... });
Теперь сама функция инъекции будет выглядеть так:
var foo = "<p>Some text</p>";
foo.inject($('parentID'), 'top');
Это создаст элемент p и добавитон находится в верхней части parentID.
Альтернативное решение
Если вы просто хотите использовать инъекцию с «верхним» и «нижним» местоположениями, вы можете использовать вместо этого метод инъекции:
inject: function(element, location) {
var html = element.get('html')
if(location === 'top') return element.set('html', this + html);
else if (location === 'bottom') return element.set('html', html + this);
}
Этот метод получит innerHTML элемента, который вам нужно преобразовать, и объединит строку с этим HTML или HTML с этой строкой, поместив строку в верхней или нижней части элемента соответственно.Затем значение innerHTML элемента устанавливается на это значение.
Преимущество этого метода заключается в том, что до тех пор, пока innerHTML элемента не слишком велик, это, вероятно, будет быстрее, поскольку нам не нужносоздавать новые элементы, которые могут занять много времени, если строка содержит много элементов верхнего уровня.Очевидно, что если бы эта ситуация была обращена вспять (несколько братьев и сестер верхнего уровня и маленький innerHTML), преимущество в скорости также было бы обращено вспять (я не проверял разницу в скорости, так что это всего лишь обоснованное предположение, и оно может быть незначительным).
Недостатком, однако, является то, что мы не можем легко использовать его с местоположениями «после» и «до».