Mootools 엘리먼트 주입

Question

미안하지만 이미 살펴 봤지만 질문이 없었습니다. - 대답 (과거에 여기 내 질문에 대한 답을 많이 찾았습니다. 직장 동료들 + 갈고리들)

나는 Mootools 요소 주입을 배우면서, 나는 이것을 오랫동안 사용하지 않았으며, 그것이 모든 종류의 사용법에 내 눈을 뜨고 있음을 발견했다. 내 질문은 URL에 링크 된 새 이미지 요소를 어떻게 구성합니까? 예를 들어 어떻게 주사합니까?

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

나는이 개 별도의 요소 &하지만 하나 개의 요소로 결합하는 투쟁으로이 작업을 수행 할 수 있습니다. 제 질문과 조언을 읽어 주셔서 감사합니다.

마크

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

당신은 둥지에 두 개의 새로운 요소 (AN 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

덕분에, 필자 필자가 실험 된 내 요구 을 위해 다음과 같은 해결책을 제공 한 실험이었다 및 답변에 대한 내 요구에 대해 다음과 같은 솔루션을

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