将新创建的div插入DOM

时间:2014-11-06 02:24:31

标签: jquery

我想将下面的div(有两个孩子)附加到DOM中的#galleryHeader div。

 <div class=open_folder_icon>
            <img class="folder_icon" src="images/folder_open.png"  alt="open folder"  />
            <div class="folder_name" >Root</div>
     </div>

我想做点什么

$('<div>').appendTo(#galleryHeader);   

但是用我更复杂的div替换简单的'div'。有没有干净的方法呢?

由于

2 个答案:

答案 0 :(得分:1)

不确定问题是什么,但如果要附加

它应该使用append

走向另一个方向
$('#galleryHeader').append('<div>');

其中<div>是一个更复杂的div作为字符串。

请参阅documentation here

或者,您应该能够:

$('<div>').appendTo('#galleryHeader');

在任何一种情况下,您都需要确保#galleryHeader是引号,因为它充当了选择器。

如果问题是关于创建复杂的div

jQuery允许您轻松地从字符串创建元素。只需在字符串中构造元素,如:

var myDiv = '<div class=open_folder_icon>' +
    '<img class="folder_icon" src="images/folder_open.png"  alt="open folder"  />' +
    '<div class="folder_name" >Root</div>' + 
    '</div>';

然后在jQuery语句中使用它:

$(myDiv).appendTo('#galleryHeader')

您也可以直接将div作为字符串放入$()表达式中,但我个人认为将它放在自己的变量中并逐行构建它比一个巨大的单行程更容易阅读HTML。

另一个选择是您可以使用underscorehandlebars等模板引擎来生成您为jQuery提供的字符串。

在幕后,jQuery调用适当的DOM函数,将HTML作为DOM元素对象从您传递的字符串中创建。

答案 1 :(得分:0)

您还应该转义引号,下面的示例是带有转义的复杂div 报价,它的工作原理。你忘了在&#34; open_folder_icon&#34;周围加上引号。类

$("#galleryHeader").append("<div class=\"open_folder_icon\"><img class=\"folder_icon\" src=\"images/folder_open.png\"  alt=\"open folder\"  /><div class=\"folder_name\" >Root</div></div>");