在jQuery中创build一个div元素
如何在jQuery中创builddiv元素？
首先用类似的东西select父元素
$("#id"), $("element") or $(".class")
然后使用.append("<div>foo</div>")函数。 或者，您可以使用.html()在不同的答案中提到。
$("#foo").append("<div>hello world</div>")
从jQuery 1.4开始，你可以像下面这样将属性传递给一个自闭的元素：
jQuery('<div/>', { id: 'foo', href: 'http://google.com', title: 'Become a Googler', rel: 'external', text: 'Go to Google!' }).appendTo('#mySelector');
这是在Docs中
例子可以在jQuery 1.4发布：你必须知道的15个新function 。
技术上$('<div></div>')将'创build' div元素（或更具体的DIV DOM元素），但不会将其添加到您的HTML文档。 然后，您需要将其与其他答案结合使用，以实际执行任何有用的操作（例如使用append()方法等）。
操作文档为您提供了有关如何添加新元素的各种选项。
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 = $("<div>").html("Loading......"); $("body").prepend(div);
$("<div/>").appendTo("div#main");
将附加一个空白div到<div id="main"></div>
所有这些都为我工作，
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>
创builddiv的一个简短的方法是
var customDiv = $("<div/>");
现在，可以将自定义div附加到任何其他div。
$("<div/>").attr('id','new').appendTo('body');
这将创build新的ID与身份“新”的div。
document.createElement('div');
这是另一种用jQuery创builddiv的技巧。
元素克隆
假设你的页面中有一个你想要使用jQuery进行克隆的div（例如在表单中多次复制一个input）。 你会这样做，如下所示。
$('#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>
创build一个内存中的DIV
$("<div/>");
添加点击处理程序，样式等 – 最后插入到目标元素select器的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>
简单地说，如果你想创build任何HTML标签，你可以尝试这个例子
var selectBody = $('body'); var div = $('<div>'); var h1 = $('<h1>'); var p = $('<p>');
如果你想在flay上添加任何元素，你可以试试这个
selectBody.append(div);
<div id="foo"></div> $('#foo').html('<div></div>');
如果你正在使用Jquery> 1.4，你最好与伊恩的答案 。 否则，我会用这个方法：
这与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;}"));
我还认为在callback函数中使用append()在这种情况下更具可读性，因为您现在立刻就会将某些内容附加到主体中。 但是，这是一个有趣的问题，就像往常一样，当写任何代码或文本。
通常，在JQuery代码中使用尽可能less的HTML，因为这主要是意大利面代码。 这是容易出错和难以维护的，因为HTML-String可以很容易地包含拼写错误。 另外，它将标记语言（HTML）与编程语言（Javascript / Jquery）混合在一起，这通常是一个糟糕的主意。
您可以使用.jquery()方法创build单独的标签。 并使用.append()方法创build子标签。 由于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数据插入到它。 接下来，我创build一个列表的子标记，提供了一些属性。 我把这个值赋给了一个variables，所以我很容易追加它。
我认为这是添加一个div的最好方法：
将一个testingdiv附加到ID为div_id的div元素：
$("#div_id").append("div name along with id will come here, for example, test");
现在将HTML附加到这个添加的testingdiv：
$("#test").append("Your HTML");
如果只是一个空格，这就足够了：
$("#foo").append("<div>")
要么
$("#foo").append("<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 tag var form = $("<div/>").addClass("form-group"); // Add label for prompt text var label = $("<label/>").attr("for", fieldName).addClass("control-label").text(promptText); // Add text field var 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); }
或者append（），你也可以使用appendTo（），它有一个不同的语法：
$("#foo").append("<div>hello world</div>"); $("<div>hello world</div>").**appendTo**("#foo");
它非常简单： $('<div/>').appendTo('body');
$(HTMLelement)可以成功。 如果你想epmty div使用它作为$('<div></div>'); 。 您也可以通过相同的方法设置其他元素。 如果您想在创build后更改内部HTML，则可以使用html()方法。 为获得outerHTML作为string，你可以使用是这样的：
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;
我正在寻找插入/简单/简单地附加一个id到div 。 所以这是对我有用的：
$("#id_to_append_div_to").append("<div id='new_id_of_div'>");
或者你可以使用这个：
$("<div id='new_id_of_div'>").appendTo("#id_to_append_div_to");
检查jQuery.create（） – jQuery插件来创buildHTML元素 。
使用：
$("#parentDiv").append("<div id='childDiv'>new div to be produced</div>");
我认为这会有所帮助。
你可以使用.add()创build一个新的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>
这个怎么样？ 在这里， pElement是指你想要这个div的元素（作为！:)的孩子。
$("pElement").append("<div></div");
您可以轻松地添加更多的东西在string – 属性，内容，你的名字。 请注意，对于属性值，您需要使用正确的引号。
我刚刚做了一个小的jQuery插件 。
它遵循你的语法：
var myDiv = $.create("div");
DOM节点ID可以被指定为第二个参数：
var secondItem = $.create("div","item2");
这是严重吗？ 但是，这个语法比$（“<div> </ div>”）要好，这对于这个钱来说是非常好的价值。
（部分复制的答案： jQuery document.createElement等效？ ）
