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>

我尝试使用此javascript将此div嵌套在之前。

$('#'+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选择器我可以使用find函数获取容器div，然后追加。在该容器中追加元素的正确方法是什么？

Answer 1

您的HTML包含：

<div class="link_drop_box">

您的JQuery代码：
$('#'+card_id).find('.link_box_drop')，应该是：
$('#'+card_id).find('.link_drop_box')。

Answer 2

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

这将解决问题

Answer 3

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

此选择器将在“card_id”div的上下文中返回“link_drop_box”。

Answer 4

你正在使用jQuery.是的，jquery只是一个js库，但正如你所做的那样，你会遇到很多问题，试图将常规js与jQuery交织在一起。

使用jQuery函数.find（）,. append（）等，您通常（如果不是总是）需要在类或id之前的标记名称。防爆。 .find（'div.link_box_drop'）或

查看find()和append()

的jQuery文档

顺便说一句，在一行上读取那么多代码真的很难。： - /

将div嵌入到另一个div中，并附加Javascript

4 个答案: