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

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

Answer 3

您正在寻找appendText。类似于Mootools文档的示例：

http://mootools.net/docs/core/Element/Element#Element:appendText

HTML

<div id="myElement">partner.</div>

的JavaScript

$('myElement').appendText('Howdy, ', 'top');

第二个（where）参数默认为'bottom'，但也接受'top'，'bottom'，'before'和'after'。

结果HTML

<div id="myElement">Howdy, partner.</div>

工作示例：

http://jsfiddle.net/hq5Gr/

Answer 4

试试这个：

var foo = "<p>Some text</p>"
$('parentID').set('html', foo + $('parentID').get('html')); // prepend/top
$('parentID').set('html', $('parentID').get('html') + foo)); // append/bottom

Answer 5

你应该看看的一些事情可能有所帮助。

首先，光滑和mootools 1.3提供了一个“更好”的新元素构造函数，可以很好地添加和配置伪字符串标记中的元素：

http://www.jsfiddle.net/dimitar/aQvpb/

new Element('div#myId.myClass.myOtherClass[title=Mouseover Title][text=Dimitar Was Here]').injectAfter(document.id("foo"));

new Element("input#someID.someClass1.someClass2[disabled=true]");

第二，element.injectAfter(previousEl)和element.injectBefore(followingEl)也可以在特定节点之后或之前的某处注入。

完全不要通过重写旧的html来附加html，或者任何未委派的元素都会消失（新的UID）

你可以使用Slick和旧版本的mootools，虽然我找不到那个atm的要点，如果你有兴趣可以在这里发帖。目前每晚相当稳定，但很快就会发布1.3版本。

Answer 6

您想要使用文本节点。

将文字附加到元素：

var yourTextNode = element.appendChild(document.createTextNode("some text"))

将文本添加到元素前面：

var yourTextNode = element.parentNode.insertBefore(document.createTextNode("some text"), element)

要更改文本节点的值，您需要执行yourTextNode.nodeValue = "new value here"。

Answer 7

@ shanebo的答案很接近，但是appendText转义HTML。

尝试：

http://mootools.net/core/docs/1.5.1/Element/Element#Element:appendHTML

$('myElement').appendHTML('<div>Hello world</div>', 'top');

小提琴：http://jsfiddle.net/m0ez1t50/1/

如何将一串HTML注入元素？

7 个答案:

最佳解决方案

替代解决方案