如何在jQuery中创建div元素?


当前回答

$(HTMLelement)可以使其成功。如果您想要epmty div,请将其用作$('<div></div>');。也可以通过相同的方法设置其他元素。如果您想在创建后更改内部HTML,可以使用HTML()方法。对于获取outerHTML作为字符串,您可以使用如下方式:

var element = $('<div/>');
var innerHTML = element.html(); // if you want set new HTML use it like this element.html('<b>new HTML</b>');
var outerHTML = element[0].outerHTML;

其他回答

创建div的一个简单方法是

var customDiv = $("<div/>");

现在,自定义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”>克隆我</按钮>

创建内存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的答案类似,但我找不到适当处理财产对象声明中方法使用的示例,所以就这样。

所有这些都对我有用,

HTML部分:

<div id="targetDIV" style="border: 1px solid Red">
    This text is surrounded by a DIV tag whose id is "targetDIV".
</div>

JavaScript代码:

//Way 1: appendTo()
<script type="text/javascript">
    $("<div>hello stackoverflow users</div>").appendTo("#targetDIV"); //appendTo: Append at inside bottom
</script>

//Way 2: prependTo()
<script type="text/javascript">
    $("<div>Hello, Stack Overflow users</div>").prependTo("#targetDIV"); //prependTo: Append at inside top
</script>

//Way 3: html()
<script type="text/javascript">
    $("#targetDIV").html("<div>Hello, Stack Overflow users</div>"); //.html(): Clean HTML inside and append
</script>

//Way 4: append()
<script type="text/javascript">
    $("#targetDIV").append("<div>Hello, Stack Overflow users</div>"); //Same as appendTo
</script>
$("<div/>").attr('id','new').appendTo('body');    

这将在body中创建id为“new”的新div。