如何将HTML字符串注入到元素中?

在底部插入:

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

在顶部插入:

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

最佳解决方案

inject方法如下所示:

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

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

    return el.inject(element, location);
}

让我们把它分成几个部分。

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()

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);
    }
});

window.addEvent('domready', function() { ... });

现在,inject函数本身将如下所示:

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

但是,缺点是我们不能很容易地将它与“after”和“before”位置一起使用。

你在找文本。类似于Mootools文档的示例:

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

HTML格式

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

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

第二个(where)参数默认为“bottom”,但也接受“top”、“bottom”、“before”和“after”。

生成的HTML

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

工作示例:

http://jsfiddle.net/hq5Gr/

试试这个:

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

有几件事你应该看看,也许会有帮助。

首先,slick和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)

你也可以将Slick与mootools的旧版本结合使用,尽管我找不到atm的要点,如果你感兴趣的话,请发到这里。目前的nightly相当稳定,但1.3版本即将发布。

您想使用文本节点。

要将文本附加到元素,请执行以下操作:

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

要将文本前置到元素,请执行以下操作:

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

yourTextNode.nodeValue = "new value here" .

尝试:

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

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

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