Mootools元素注入

Question

很抱歉，如果这已经被涵盖了，我已经看过了，但没有遇到问题 - 答案（我过去在这里找到了我的问题的很多答案 - 继续努力，伙计们+女孩们）

我学习 Mootools 元素注入，我使用它的时间并不长，但我发现它让我对各种用法大开眼界。我的问题是如何构建链接到 url 的新图像元素？例如我如何注射；

<a href="[url]"><img src="[path]" /></a>

我可以将其作为 2 个独立的元素来完成但努力将它们结合为一个元素。感谢您阅读我的问题并提供任何建议。

标记

Answer 1

感谢您的回复，我一直在尝试并根据我的需求提出了以下解决方案

photos.each(function(photo){
    var el = new Element('div.image'),
    image = new Element('img', {
        'src': photo.src 
    }).inject(el),
    defaultLink = new Element( 'a', {
        'class': 'makeImageDefault', 'name': photo.id
    }).inject(image, 'after'),
    defaultImageIcon = new Element( 'img', { 
        'src': photo.defaultIcon 
    }).inject(defaultLink, 'inside' )
    el.inject($('photoGrid'));
});

Answer 2

使用 Elements.from，它快速、完全有效且简单。

var collection = '<a href="{href}"><img src="{src}" /></a>';
Elements.from(collection.substitute({
    href: 'http://www.stackoverflow.com',
    src: 'http://www.placekitten.com/300/300'
})).inject(document.body);

一个明显的缺点是您没有对创建的节点的引用，只有元素集合的引用。

Answer 3

您可以使用 grab 或 注入 到两个新元素（img 和a) 来嵌套它们：

var anchor = new Element("a", {
    href: "http://www.stackoverflow.com"
});

var img = new Element("img", {
    src: "http://www.placekitten.com/300/300"
});

// inject the img into the anchor
img.inject(anchor);

// Append the anchor into the body:
document.body.grab(anchor);

这将生成以下 HTML：

<a href="http://www.stackoverflow.com">
    <img src="http://www.placekitten.com/300/300">
</a>

示例： http://jsfiddle.net/tNamz/