在 jQuery 中创建 div 元素 [duplicate]

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

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

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

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

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

您可以使用（在父项的最后一个位置添加）或（在父项的第一个位置添加）：appendprepend

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

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

从技术上讲，它将“创建”一个元素（或更具体地说是 DIV DOM 元素），但不会将其添加到您的 HTML 文档中。然后，您需要将其与其他答案结合使用，以实际使用它做任何有用的事情（例如使用该方法或类似方法）。$('<div></div>')divappend()

操作文档为您提供了有关如何添加新元素的所有各种选项。

从 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 个新功能中找到。

所有这些都对我有用，

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>

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');    

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

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

要将测试 div 附加到 ID 为 div_id 的 div 元素，请执行以下操作：

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

现在将 HTML 附加到这个添加的测试 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");

严重吗？不。但是这种语法比$（“<div></div>”）更好，而且物有所值。

（答案部分复制自：jQuery document.createElement equivalent？）

您可以使用该方法创建单独的标签。并使用该方法创建子标记。由于jQuery支持链接，因此还可以通过两种方式应用CSS。 要么在类中指定它，要么直接调用：.jquery().append().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 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);
}

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

例如 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 的答案非常相似，但我不知道他们为什么使用而不是 Jquery 表示法。document.createElement

$("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 代码中使用尽可能少的 HTML，因为这主要是意大利面条代码。它容易出错且难以维护，因为 HTML-String 很容易包含拼写错误。此外，它将标记语言（HTML）与编程语言（Javascript / Jquery）混合在一起，这通常是一个坏主意。

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

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（） 您还可以使用具有不同语法的 which：appendTo()

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

如果您想创建任何 HTML 标签，您可以尝试此操作 例如

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

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

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>

_{类似于 ian 的回答，但我没有发现任何示例可以正确解决属性对象声明中方法的使用问题，所以你去吧。}

这个怎么样？这里，指的是你希望它里面的元素（成为！:)的子元素。pElementdiv

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

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