如何在jQuery中创建div元素?


当前回答

可以使用.jquery()方法创建单独的标记。并使用.append()方法创建子标记。由于jQuery支持链接,您还可以通过两种方式应用CSS。要么在类中指定它,要么只调用.attr():

var lTag = jQuery("<li/>")
.appendTo(".div_class").html(data.productDisplayName);

var aHref = jQuery('<a/>',{         
}).appendTo(lTag).attr("href", data.mediumImageURL);

jQuery('<img/>',{                                               
}).appendTo(aHref).attr("src", data.mediumImageURL).attr("alt", data.altText);

首先,我将一个列表标记附加到div标记并将JSON数据插入其中。接下来,我将创建一个列表的子标记,并提供一些属性。我已经将值赋给了一个变量,这样我就可以很容易地附加它。

其他回答

创建内存DIV

$("<div/>");

添加单击处理程序、样式等,最后将其插入到DOM中的目标元素选择器中:

$(“<div/>”{//此处的属性text:“单击我”,id:“示例”,“class”:“myDiv”,//('class'在引号中更好)css:{颜色:“红色”,fontSize:“3em”,光标:“指针”},日期:{mouseenter:函数(){console.log(“请…”+$(this).text());},单击:函数(){console.log(“嗨!我的ID是:”+this.ID);}},追加:“<i>!!</i>”,appendTo:“body”//最后,附加到任何选择器}); // << 这里不需要做任何事情,因为我们在内部定义了财产。<script src=“//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js”></script>

与ian的答案类似,但我找不到适当处理财产对象声明中方法使用的示例,所以就这样。

您可以使用append(添加到父级的最后一个位置)或prepend(添加到其父级的第一个位置):

$('#parent').append('<div>hello</div>');    
// or
$('<div>hello</div>').appendTo('#parent');

或者,可以使用不同答案中提到的.html()或.add()。

可以使用.jquery()方法创建单独的标记。并使用.append()方法创建子标记。由于jQuery支持链接,您还可以通过两种方式应用CSS。要么在类中指定它,要么只调用.attr():

var lTag = jQuery("<li/>")
.appendTo(".div_class").html(data.productDisplayName);

var aHref = jQuery('<a/>',{         
}).appendTo(lTag).attr("href", data.mediumImageURL);

jQuery('<img/>',{                                               
}).appendTo(aHref).attr("src", data.mediumImageURL).attr("alt", data.altText);

首先,我将一个列表标记附加到div标记并将JSON数据插入其中。接下来,我将创建一个列表的子标记,并提供一些属性。我已经将值赋给了一个变量,这样我就可以很容易地附加它。

<div id="foo"></div>

$('#foo').html('<div></div>');

下面是另一种使用jQuery创建div的技术。

元素克隆

假设您的页面中有一个现有的div,您希望使用jQuery克隆该div(例如,在表单中多次复制输入)。你可以这样做。

$('#clone_button').click(function(){$(“#clone_wrapper div:first”).clone().append('克隆').appendTo($(“#clone_wrapper”));});<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><div id=“clone_wrapper”><div>Div公司</div></div><button id=“clone_button”>克隆我</按钮>