javascript - Skapa ett div-element i jQuery

Hur skapar jag ett div-element i jQuery?

Svar #1

Från och med jQuery 1.4 kan du skicka attribut till ett självlutat element på följande sätt:

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

Här är det i Dokument

Exempel kan hittas på jQuery 1.4 släppt: De 15 nya funktionerna du måste känna till.

Svar #2

Du kan använda append (för att lägga till på förälderns sista position) eller prepend (för att lägga till på förälderns första position):

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

Alternativt kan du använda .html() eller .add() som nämns i ett annat svar.

Svar #3

Tekniskt sett kommer $ ('<div></div>') att ’skapa’ ett div-element (eller mer specifikt ett DIV DOM-element) men kommer inte att lägga till det i ditt HTML-dokument. Du kommer sedan behöva använda det i kombination med de andra svaren för att faktiskt göra något användbart med det (såsom att använda append()-metoden eller liknande).

Manipulationsdokumentationen ger dig alla olika alternativ för hur du lägger till nya element.

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

Svar #5

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

Svar #6

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

kommer att lägga till en tom div till <div id="main"></div>

Svar #7

Ett kort sätt att skapa div är

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

Nu kan den anpassade div:en läggas till i vilken annan div som helst.

Svar #8

Alla dessa fungerade för mig,

HTML-del:

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

JavaScript-kod:

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

Svar #9

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

Detta kommer att skapa en ny div med id "new" i body.

Svar #10

document.createElement('div');

Svar #11

Skapa en DIV i minnet

$("<div/>");

Lägg till klickhanterare, stilar etc. - och slutligen infoga i DOM i en målelementväljare:

$("<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>

Liknande Ians svar, men jag hittade inget exempel som korrekt tar upp användningen av metoder inom egenskapsobjektets deklaration, så där har du det.

Svar #12

Här är en annan teknik för att skapa divar med jQuery.

ELEMENTKLONING

Säg att du har en befintlig div på din sida som du vill klona med jQuery (t.ex. för att duplicera ett formulärfält flera gånger i ett formulär). Du skulle göra det på följande sätt.

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

Relaterade artiklar