在jQuery中创建div元素

Question

如何div在jQuery中创建元素？

Answer 1

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

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

这是在Docs中

例子可以在jQuery 1.4发布:你必须知道的15个新功能.

Answer 2

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

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

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

Answer 3

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

该操作文档提供了关于如何添加新元素的所有各种选择.

Answer 4

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();
});

Answer 5

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

Answer 6

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

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

Answer 7

创建div的一个简短方法是

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

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

Answer 8

所有这些对我有用,

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>

Answer 9

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

这将创建一个id为"new"的新div到body中.

Answer 10

document.createElement('div');

Answer 11

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

元素克隆

假设您在页面中有一个想要使用jQuery克隆的div(例如,在表单中多次复制输入).你会这样做.

$('#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>

Answer 12

创建内存中的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>

_{类似伊恩的答案,但我没有发现任何例如,妥善解决了使用方法中对象的属性声明,所以你去.}

Answer 13

只是如果你想创建任何HTML标签,你可以尝试这样做

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

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

selectBody.append(div);

Answer 14

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

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

Answer 15

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

Answer 16

除了append（）之外，您还可以使用appendTo()具有不同语法的语法：

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

Answer 17

您可以使用该.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 数据。接下来，我创建列表的子标签，并提供一些属性。我已将值分配给变量，以便我可以轻松附加它。