在 Javascript 中使用附加功能将一个 div 嵌套到另一个 div 中

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 嵌套在前面的 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\" /> <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')，或

查看 jQuery 文档中的 find() 和 < a href="http://api.jquery.com/append/" rel="nofollow">append()

顺便说一句，在一行中阅读这么多代码确实很困难。 :-/