Erstellen eines div-Elements in jQuery

Question

Wie kann ich eine div Element in jQuery ?

Answer 1

Erstellen eines speicherinternen DIV

$("<div/>");

Klick-Handler, Stile usw. hinzufügen - und schließlich in DOM einfügen in einen Zielelement-Selektor:

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

_{Ähnlich wie bei der Antwort von ian, aber ich habe kein Beispiel gefunden, das die Verwendung von Methoden richtig behandelt <em>innerhalb </em>die Deklaration der Eigenschaften des Objekts, und das war's.}

Answer 2

Hier ist eine weitere Technik zur Erstellung von Divs mit jQuery.

KLONEN VON ELEMENTEN

Angenommen, Sie haben ein bestehendes div in Ihrer Seite, das Sie mit jQuery klonen möchten (z. B. um eine Eingabe in einem Formular mehrfach zu duplizieren). Sie würden dies wie folgt tun.

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

Wenn Sie ein beliebiges HTML-Tag erstellen möchten, können Sie Folgendes versuchen zum Beispiel

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

Wenn Sie ein beliebiges Element auf dem Flay hinzufügen möchten, können Sie Folgendes versuchen

selectBody.append(div);

Answer 4

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

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

Answer 5

Alternativ zu append() können Sie auch appendTo() die eine andere Syntax hat:

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