CODEWITHSUNDEEP
javascriptjqueryfindappend
user823527
user823527

Reputation: 3712

Nest a div into another div with append in Javascript

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?

Upvotes: 0

Views: 1684

Answers (4)

David Hobs
David Hobs

Reputation: 4511

You're using jQuery. Yes, jquery is just a js library, but as you're doing, you'll run into plenty of problems trying to intertwine regular js with jQuery.

With the jQuery functions .find(), .append() etc, you usually, if not always, need the tag name in there before the class or id. Ex. .find('div.link_box_drop'), or

Look over the jQuery documentation for find() and append()

Btw, it's really hard to read that much code on one line. :-/

Upvotes: 0

Rob W
Rob W

Reputation: 349142

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').

Upvotes: 1

twernt
twernt

Reputation: 20601

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

This selector will return "link_drop_box" in the context of the "card_id" div.

Upvotes: 0

Senad Meškin
Senad Meškin

Reputation: 13756

$('#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>");

this will do the trick

Upvotes: 0

Related Questions