Блог

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

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

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

Я могу сделать это как 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);
  

Очевидным недостатком является то, что у вас нет ссылок на созданные узлы, только на коллекцию элементов.

Вы могли бы использовать 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/

спасибо за ваши ответы, я экспериментировал и придумал следующее решение для своих нужд

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