最佳解决方案
注入方法如下所示:
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 = "
Some text
";var el = Elements.from(foo);
//el is equal to a p element.
var bar = "
var el = Elements.from(bar);
//el is equal to an array containing 2 div elements
2)if($type(el) === 'array')检查el是否为数组。如果是,则将.reverse()应用于el。这是以正确的顺序注入元素所必需的。否则,他们会注入第二个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);
}
});
这将允许您对包含字符串的任何变量使用inject函数。确保你没有把它放在domready事件中,即在window.addEvent('domready', function() { ... });之前
现在注入函数本身将如下所示:
var foo = "
Some text
";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不是太大,这可能会更快,因为我们不需要创建新元素,如果字符串包含这些元素可能会非常耗时许多顶级兄弟元素。显然,如果这种情况发生逆转(很少有顶级兄弟和小内部HTML),速度优势也会逆转(我没有测试速度差异所以这只是一个有根据的猜测,可能是微不足道的。)
然而,缺点是我们不能轻易地将它用于'之后'和'之前'的位置。