Как внедрить изображение в div, используя его класс в качестве селектора

Question

Я не могу заставить это работать, я хочу создать новый элемент DIV с id = item и class = item + variable, например:

<div id="item" class="item1"></div>

, а затем вставьте изображение внутрь, выбрав новый созданный класс divs, в результате чего получится что-то вроде этого:

<div id="item" class="item1">
   <img src="images/1.png" style="width: 64px; height: 64px;">
</div>

Я думаю, что моя проблема с моим последним селектором ввода, но я не уверен, что div создает себя, но не внедряет изображение.

var content = this.options.content;
var id = this.options.id;

new Element('div', {id: 'item', class: 'item'+id}).inject($('slot'+id));        
new Element('img',{ src:'images/'+content+'.png', style:'width: 64px; height: 64px;' }).inject($('.item'+id));

Answer 1

Я не эксперт по mootools, но мне кажется, что для метода ввода требуется один элемент в качестве параметра, а $ ('. Item' + id) не дает вам ни одного элемента (на самом деле это возвращает значение null), поскольку вы задаете ему аргумент класса вместо идентификатора, а также потому, что искомый элемент еще не находится в DOM.

Вместо этого вы можете просто отслеживать элемент, который вы только что создали.

Вот пример кода, который работает:

var id = 1;

var el = new Element('div', {id: 'item', class: 'item'+id}).inject($('slot'+id));        
new Element('img',{ src:'http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg', style:'width: 100px; height: 66px;' }).inject(el);

И, jsFiddle: http://jsfiddle.net/jfriend00/czNTL/

Answer 2

вы можете использовать

var g = new Element('div', {id: 'item', class: 'item'+id}).inject($('slot'+id));        
new Element('img',{  style:'width: 64px; height: 64px;' }).inject(g);