Question

I am having difficulty with this simple javascript where I want to nest a div inside another div. The div looks like this.

<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>

In the “link_drop_box” I want to nest this 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>

I try to nest this div in the previous with this 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>');

I thought that with the .link_drop_box selector I could get the container div with the find function, then append. What is the right way to append an element inside that container?

Answer 1

Your HTML contains:

<div class="link_drop_box">

Your JQuery code:
$('#'+card_id).find('.link_box_drop'), which should be:
$('#'+card_id).find('.link_drop_box').