如何大量拼接html元素,如何将一串HTML注入元素？

最佳解决方案

注入方法如下所示：

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 = "

First div

Second div

";

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)，速度优势也会逆转(我没有测试速度差异所以这只是一个有根据的猜测，可能是微不足道的。)

然而，缺点是我们不能轻易地将它用于'之后'和'之前'的位置。