Вложить div в другой div с добавлением в Javascript

Question

У меня трудности с этим простым javascript, где я хочу вложить div в другой div.Div выглядит следующим образом.

<div id="div01" class="comdiv ui-widget-content" style="position: absolute; top: 40px; left: 40px; width:350px; height:250px;">
    <p id="heading" class="comhdr editableText">Editable</p>
    <div class="toolbar">
             <a href='#' title='Options' class='icotools'></a>
             <a href='#' title='Delete' class='icodelete'></a>
    </div>
    <br/>
    <div class="link_drop_box">

      <!-- Nest div here -->

    </div>
</div>

В "link_drop_box" я хочу вложить этот div.

<div id="u0014" class="comurl" onmouseOver="url_preview('show', this, 'div01');" onmouseOut="url_preview('hide', this, 'div01');"><img class="dhandle" src="http://www.google.com/s2/favicons?domain=tf1.fr" align="middle" />&nbsp;<a href="http://tf1.fr" target="_blank">TF1.fr</a> <img class="urlbutton" title="Delete" src="/icodeact/Delete16.png" onClick="delete_url('u0014');"/> <img src="/images/spacer.png" class="spacer" /> <img class="urlbutton" title="Edit" src="/icodeact/Edit16.png" onClick=""/> 
</div>

Я пытаюсь вложить этот div в предыдущее с помощью этого javascript.

$('#'+card_id).find('.link_box_drop').append('<div id="'+link_id+'" class="link" onmouseOver="link_preview(\'show\', this, \''+card_id+'\');" onmouseOut="link_preview(\'hide\', this, \''+card_id+'\');"><img class="dhandle" src="http://www.google.com/s2/favicons?domain='+link_ico+'" align="middle" />&nbsp;<a href="'+link_info[1]+'" target="_blank">'+link_info[0]+'</a> <img class="link_button" title="Delete" src="/icodeact/Delete16.png" onClick="delete_url(\''+link_id+'\');"/> <img src="/images/spacer.png" class="link_button_spacer" /> <img class="link_button" title="Edit" src="/icodeact/Edit16.png" onClick=""/> </div>');

Я думал, что с помощью селектора .link_drop_box я мог бы получить контейнер div с помощью функции find, а затем добавить.Как правильно добавить элемент в этот контейнер?

Answer 1

Ваш HTML содержит:

<div class="link_drop_box">

Ваш код JQuery:
$('#'+card_id).find('.link_box_drop'), который должен быть:
$('#'+card_id).find('.link_drop_box').

Answer 2

Вы используете jQuery. Да, jquery - это просто библиотека js, но, как вы это делаете, вы столкнетесь с множеством проблем, пытаясь переплетать обычные js с jQuery.

С помощью функций jQuery .find (), .append () и т. Д. Обычно, если не всегда, требуется имя тега перед классом или идентификатором. Ex. .find ('div.link_box_drop') или

Просмотрите документацию jQuery для find () и append ()

Кстати, действительно сложно прочитать столько кода в одной строке. : - /

Answer 3

$('div.link_box_drop', $('#'+card_id))

Этот селектор возвратит "link_drop_box" в контексте div "card_id".

Answer 4

$('#div01 div.link_drop_box:first-child').append("<div id=\"u0014\" class=\"comurl\" onmouseOver=\"url_preview(\'show\', this, \'div01\');\" onmouseOut=\"url_preview(\'hide\', this, \'div01\');\"><img class=\"dhandle\" src=\"http://www.google.com/s2/favicons?domain=tf1.fr\" align=\"middle\" />&nbsp;<a href=\"http://tf1.fr\" target=\"_blank\">TF1.fr</a> <img class=\"urlbutton\" title=\"Delete\" src=\"/icodeact/Delete16.png\" onClick=\"delete_url('u0014');\"/> <img src=\"/images/spacer.png\" class=\"spacer\" /> <img class=\"urlbutton\" title=\"Edit\" src=\"/icodeact/Edit16.png\" onClick=\"\"/></div>");

это сделает свое дело