Mootools要素の注入

Question

imこれは既にカバーされていますが、私は見ていますが、質問に答えることはできませんでした - 私は過去にここに私の質問に多くの答えを見つけました - 仕事仲間+ギャル）

私はMootoolsの要素注入を学んでいますが、私はこれを長年使っていませんでした。私はあらゆる用途に目を開けています。私の質問は、私はどのようにURLにリンクされている新しい画像要素を構築するのですか？例えば私はどのように注入するのですか？

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

私は2つの別々の要素としてこれを行う&が、1つの要素として、それらを組み合わせるのに苦労することができます。私の質問とアドバイスを読んでいただきありがとうございます。

マーク

Answer 1

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 2

あなたは巣にそれらを二つの新しい要素（imgとa）にgrabまたはinjectを使用することができます。

<a href="http://www.stackoverflow.com"> 
    <img src="http://www.placekitten.com/300/300"> 
</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を生成します。 例：http://jsfiddle.net/tNamz/

Answer 3

おかげで、実験してIVEと私のニーズのために、以下の溶液を用いて、あなたの応答のための

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