Mootools элемент впрыска

Question

извините, если это уже было рассмотрено, я посмотрел, но не пришел по вопросу - ответу (я нашел так много ответов на мой вопрос здесь в прошлом - продолжайте в том же духе, ребята + девочки)

Я изучаю инъекцию элементов Mootools, я давно этим не пользуюсь и обнаружил, что она открывает глаза на все виды использования. У меня вопрос, как мне создать новый элемент изображения, который связан с URL-адресом? например, как мне вводить;

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

Я могу сделать это как 2 отдельных элемента, но изо всех сил пытаюсь объединить их в один элемент. Спасибо за то, что прочитали мой вопрос и за любые советы.

Mark

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

Вы можете использовать grab или inject на двух новых элементах (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/

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