Jquery добавляет div внутри div с id и манипулирует

после 2 часов поиска я решил задать свой вопрос.

У меня есть div:

<div id="box"></div>

Я хочу добавить div внутри указанного div с помощью jquery.

Я попробовал (следующий код внутри функции):

var e = $('<div style="display:block; float:left;width:'+width+'px; height:'+height+'px; margin-top:'+positionY+'px;margin-left:'+positionX+'px;border:1px dashed #CCCCCC;"></div>');
$('div', e).attr('id', 'myid');
$("#box").append(e);

но доступ к $( "# myid" ) не работает.

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

Благодарю вас!

Ответ 1

Это просто неправильный порядок

var e = $('<div style="display:block; float:left;width:'+width+'px; height:'+height+'px; margin-top:'+positionY+'px;margin-left:'+positionX+'px;border:1px dashed #CCCCCC;"></div>');
$('#box').append(e);    
e.attr('id', 'myid');

Добавить сначала, а затем получить доступ/установить attr.

Ответ 2

Вы слишком сильно себя чувствуете:

var e = $('<div style="display:block; float:left;width:'+width+'px; height:'+height+'px; margin-top:'+positionY+'px;margin-left:'+positionX+'px;border:1px dashed #CCCCCC;"></div>');
e.attr('id', 'myid');
$('#box').append(e);

Например: http://jsfiddle.net/ambiguous/Dm5J2/

Ответ 3

Почему бы не пойти еще проще с одной из следующих опций:

$("#box").html('<div id="myid" style="display:block; float:left;width:'+width+'px; height:'+height+'px; margin-top:'+positionY+'px;margin-left:'+positionX+'px;border:1px dashed #CCCCCC;"></div>');

Или, если вы хотите добавить его к существующему контенту:

$("#box").append('<div id="myid" style="display:block; float:left;width:'+width+'px; height:'+height+'px; margin-top:'+positionY+'px;margin-left:'+positionX+'px;border:1px dashed #CCCCCC;"></div>');

Примечание. Я помещаю id="myid" прямо в строку HTML, а не используя отдельный код для его установки.

Оба метода .html() и .append() jQuery могут принимать строку HTML, поэтому нет необходимости использовать отдельный шаг для создания объектов.

Ответ 4

var e = $('<div style="display:block; id="myid" float:left;width:'+width+'px; height:'+height+'px; margin-top:'+positionY+'px;margin-left:'+positionX+'px;border:1px dashed #CCCCCC;"></div>');
$("#box").html(e);