在jQuery中创建div元素

小开

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

小开

$("<div/>").appendTo("div#main");

将一个空白div附加到<div id="main"></div>

小开

div = $("<div>").html("Loading......");$("body").prepend(div);

小开

最佳答案

您可以使用append（在父节点的最后位置添加）或prepend（在父节点的第一位置添加）：

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

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

小开

从技术上讲，$('<div></div>')将“创建”一个div元素（或者更具体地说是一个DIV DOM元素），但不会将其添加到您的超文本标记语言文档中。然后，您需要将其与其他答案结合使用，以实际执行任何有用的操作（例如使用append()方法等）。

操纵留档为您提供了有关如何添加新元素的所有选项。

小开

从jQuery 1.4开始，您可以将属性传递给自封闭元素，如下所示：

jQuery('<div>', {id: 'some-id',class: 'some-class some-other-class',title: 'now this div has a title!'}).appendTo('#mySelector');

这是在文档

示例可以在jQuery 1.4发布：你必须知道的15个新功能中找到。

小开

所有这些都为我工作，

超文本标记语言部分：

<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>

小开

document.createElement('div');

小开

d = document.createElement('div');$(d).addClass(classname).html(text).appendTo($("#myDiv")) //main div.click(function () {$(this).remove();}).hide().slideToggle(300).delay(2500).slideToggle(300).queue(function () {$(this).remove();});

小开

$("<div/>").attr('id','new').appendTo('body');

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

小开

我认为这是添加div的最佳方式：

要将测试div附加到具有IDdiv_id的div元素：

$("#div_id").append("div name along with id will come here, for example, test");

现在将超文本标记语言附加到这个添加的测试div：

$("#test").append("Your HTML");

小开

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

元素克隆

假设您的页面中有一个现有的div，您想使用jQuery克隆它（例如在表单中多次复制输入）。你会这样做如下。

$('#clone_button').click(function() {$('#clone_wrapper div:first').clone().append('clone').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">Clone me!</button>

小开

我刚刚为此做了一个小jQuery插件。

它遵循您的语法：

var myDiv = $.create("div");

DOM节点ID可以指定为第二个参数：

var secondItem = $.create("div","item2");

严重吗？不。但这种语法比$（"

"）

好，而且物有所值。

（答案部分复制自：jQuerydocument.createElement等效？）

小开

您可以使用.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，这就足够了：

$("#foo").append("<div>")

或

$("#foo").append("<div/>")

它给出了同样的结果。

小开

创建div的简单方法是

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

现在可以将自定义div附加到任何其他div。

小开

我希望这有助于代码。：）（我使用）

function generateParameterForm(fieldName, promptText, valueType) {//<div class="form-group">//<label for="yyy" class="control-label">XXX</label>//<input type="text" class="form-control" id="yyy" name="yyy"/>//</div>
// Add new div tagvar form = $("<div/>").addClass("form-group");
// Add label for prompt textvar label = $("<label/>").attr("for", fieldName).addClass("control-label").text(promptText);
// Add text fieldvar input = $("<input/>").attr("type", "text").addClass("form-control").addClass(valueType).attr("id", fieldName).attr("name", fieldName);
// lbl and inp => form$(form).append(label).append(input);
return $(form);}

小开

您可以使用.add()创建一个新的jQuery对象并添加到目标元素。然后使用链接继续。

例如jQueryApi：

$( "div" ).css( "border", "2px solid red" ).add( "p" ).css( "background", "yellow" );

 div {width: 60px;height: 60px;margin: 10px;float: left;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div></div><div></div><div></div><div></div><div></div><div></div>

小开

如果你使用的是JQuery>1.4，你最好使用Ian的答案

这与Celoron的回答非常相似，但我不知道为什么他们使用document.createElement而不是JQuery表示法。

$("body").append(function(){return $("<div/>").html("I'm a freshly created div. I also contain some Ps!").attr("id","myDivId").addClass("myDivClass").css("border", "solid").append($("<p/>").html("I think, therefore I am.")).append($("<p/>").html("The die is cast."))});
//Some style, for better demonstration if you want to try it out. Don't use this approach for actual design and layout!$("body").append($("<style/>").html("p{background-color:blue;}div{background-color:yellow;}div>p{color:white;}"));

我还认为在这种情况下，将append()与回调函数一起使用更具可读性，因为您现在可以立即将某些内容附加到主体中。但这是一个品味问题，在编写任何代码或文本时总是如此。

一般来说，在JQuery代码中尽可能少地使用超文本标记语言，因为这主要是意大利面条代码。它容易出错且难以维护，因为超文本标记语言-String很容易包含错别字。此外，它混合了置标语言（超文本标记语言）和编程语言（Javascript/JQuery），这通常是一个糟糕的想法。

小开

$(HTMLelement)可以成功。如果您想要一个epmty div，请将其用作$('<div></div>');。您也可以使用相同的方法设置其他元素。如果您想在创建后更改内部超文本标记语言，您可以使用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;

小开

或者append（）你也可以使用appendTo()，它有不同的语法：

$("#foo").append("<div>hello world</div>");$("<div>hello world</div>").appendTo("#foo");

小开

如果你想创建任何超文本标记语言，你可以试试这个例如

var selectBody = $('body');var div = $('<div>');var h1  = $('<h1>');var p   = $('<p>');

如果你想在皮上添加任何元素，你可以试试这个

selectBody.append(div);

小开

创建内存中的DIV

$("<div/>");

添加单击处理程序，样式等-最后插入到DOM到目标元素选择器中：

$("<div/>", {
// PROPERTIES HERE  
text: "Click me",id: "example","class": "myDiv",      // ('class' is still better in quotes)css: {color: "red",fontSize: "3em",cursor: "pointer"},on: {mouseenter: function() {console.log("PLEASE... "+ $(this).text());},click: function() {console.log("Hy! My ID is: "+ this.id);}},append: "<i>!!</i>",appendTo: "body"      // Finally, append to any selector  
}); // << no need to do anything here as we defined the properties internally.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

_{Similar to ian's answer, but I found no example that properly addresses the use of methods within the properties object declaration so there you go.}

小开

这个怎么样？在这里，pElement指的是您希望这个div在里面的元素（是！：）的子元素。

$("pElement").append("<div></div");

您可以轻松地向字符串中的div添加更多内容-属性、内容，您命名它。请注意，对于属性值，您需要使用正确的引号。