如何将一串HTML注入元素？

Question

使用Mootools,我们可以将元素注入另一个元素:

$('childID').inject($('parentID'), 'top');

第二个参数允许我控制位置,可以是"顶部"或"底部",将其注入父对象或"之前"或"之后",将其作为兄弟注入.

我们还可以从字符串中设置元素的HTML:

var foo = "<p>Some text</p>";
$('parentID').set('html', foo);

我的问题是我希望与字符串具有相同的灵活性.例如,我不能使用字符串在元素的顶部,set()因为这会覆盖HTML而不是将其附加到特定位置.同样,我不能在兄弟元素之后或之前追加HTML.

是否有一个函数可以让我以与注入元素相同的方式注入字符串？

Answer 1

在底部插入：

foo.innerHTML = foo.innerHTML + 'string';

在顶部插入：

foo.innerHTML = 'string' + foo.innerHTML;

Answer 2

最佳方案

注入方法如下所示:

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()于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 = "<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不是太大,这可能会更快,因为我们不需要创建新的元素,如果字符串包含许多top-等级兄弟元素.显然,如果这种情况发生逆转(很少有顶级兄弟和小型内部HTML),速度优势也会逆转(我没有测试速度差异所以这只是一个有根据的猜测,可能是微不足道的).

然而,缺点是我们不能轻易地将它用于"后"和"之前"位置.