如何将一串HTML注入元素？ [英] How can I inject a string of HTML into an element?

问题描述

使用Mootools，我们可以将元素注入另一个元素：

Using Mootools, we can inject an element into another element:

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

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

The second parameter allows me to control the location and can either be 'top' or 'bottom' to inject it into a parent object or 'before' or 'after' to inject it as a sibling.

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

We can also set the HTML of an element from a string:

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

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

My problem is that I want to have the same flexibility with strings as I do with elements. I can't, for example, put a string at the top of an element using set() as this overwrites the HTML rather than appending it at a specific location. Similarly, I can't append HTML after or before a sibling element.

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

Is there a function that will allow me to inject strings in the same way as I inject elements?

推荐答案

最佳解决方案

inject方法如下所示：

Best Solution

The inject method will look like this:

inject: function(element, location) {
    var el = Elements.from(this);

    if($type(el) === 'array') var el = el.reverse();

    return el.inject(element, location);
}

让我们把它分成几部分。

Let's break this into parts.

1） Elements.from（this）将采用适用的方法并将其转换为元素：

1) Elements.from(this) will take whatever the method is applied to and convert it into elements:

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只是一个元素，我们不需要改变它的顺序。

2) if($type(el) === 'array') checks if el is an array. If it is then it applies .reverse() to el. This is necessary to inject the elements in the correct order. Otherwise they would inject with, for example, the second div first and the first div second. Obviously if el is just a single element, we don't need to change its order.

3）最后，我们只使用原始的注入方法将el注入到element参数中指定的元素，位于location参数中指定的位置。如果el是一个元素数组，它们都会很好地注入。

3) Finally, we just use the original inject method to inject el into the element specified in the element parameter to the location specified in the location parameter. If el is an array of elements, they will all get injected just fine.

为了能够使用这个函数，我们必须将它作为方法添加到字符串对象上。要做到这一点，你必须使用 implement（）：

To be able to use this function, we have to add it as a method on string objects. To do this you have to use 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（）{...}）;

This will allow you to use the inject function on any variable containing a string. Make sure you don't put this inside the domready event i.e. Before window.addEvent('domready', function() { ... });

现在注入函数本身将如下所示：

Now the inject function itself will look like this:

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

这将创建p元素并将其注入parentID的顶部。

This will create the p element and inject it at the top of parentID.

如果您只想在顶部和底部位置使用注入，则可以使用此注入方法相反：

If you just wish to use inject with the 'top' and 'bottom' locations, you can use this inject method instead:

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设置为此值。

This method will get the innerHTML of the element you need to convert and either concatenate the string with that HTML or the HTML with that string, placing the string at the top or the bottom of the element respectively. The element's innerHTML is then set to this value.

此方法的优点是，只要元素的innerHTML不太大，这很可能更快，因为我们不需要创建新元素，如果字符串包含许多顶级兄弟元素，这可能会非常耗时。显然，如果这种情况发生逆转（很少有顶级兄弟和小内部HTML），速度优势也会逆转（我没有测试速度差异所以这只是一个有根据的猜测，可能是微不足道的。）

The advantage of this method is that as long as the innerHTML of the element isn't too great, this is likely to be faster as we don't need to create new elements which could be time-consuming if the string contains many top-level sibling elements. Obviously if this situation were reversed (few top-level siblings and small innerHTML), the speed advantage would also be reversed (I haven't tested the speed difference so this is just an educated guess and might be negligible).

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

The disadvantage, however, is that we can't easily use it with the 'after' and 'before' locations.

这篇关于如何将一串HTML注入元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！