it-swarm.com.de

Erstellen eines div-Elements in jQuery

Wie erstelle ich ein div -Element in jQuery?

1477
useranon

Sie können append (zum Hinzufügen an der letzten Position des übergeordneten Elements) oder prepend (zum Hinzufügen an der ersten Position des übergeordneten Elements) verwenden:

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

Alternativ können Sie .html() oder .add() verwenden, wie in einem andere Antwort erwähnt.

1030
cm2

Ab jQuery 1.4 können Sie Attribute wie folgt an ein selbstgeschlossenes Element übergeben:

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

Hier ist es in der Docs

Beispiele finden Sie unter jQuery 1.4 veröffentlicht: Die 15 neuen Funktionen, die Sie kennen müssen.

1953
ian

Technisch gesehen 'erzeugt' $('<div></div>') ein div -Element (oder genauer gesagt ein DIV DOM -Element), fügt es jedoch nicht zu Ihrem HTML-Dokument hinzu. Sie müssen dies dann in Kombination mit den anderen Antworten verwenden, um tatsächlich etwas Nützliches damit zu tun (z. B. mit der append() -Methode oder ähnlichem).

Die Manipulationsdokumentation gibt Ihnen alle Möglichkeiten, wie Sie neue Elemente hinzufügen können.

227
samjudson
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();
});
192
celoron
div = $("<div>").html("Loading......");
$("body").prepend(div);    
79
Ish
$("<div/>").appendTo("div#main");

füge ein leeres div an <div id="main"></div> an

63
Caius

Eine kurze Möglichkeit, div zu erstellen, ist

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

Jetzt kann das benutzerdefinierte Div an jedes andere Div angehängt werden.

57
maxspan

All dies hat für mich funktioniert,

HTML-Teil:

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

JavaScript-Code:

//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>
55
Hoque
$("<div/>").attr('id','new').appendTo('body');    

Dadurch wird ein neues Div mit der ID "new" in body erstellt.

38
Ajay
document.createElement('div');
26
eomeroff

Hier ist eine andere Technik zum Erstellen von Divs mit jQuery.

ELEMENT CLONING

Angenommen, Sie haben ein Div auf Ihrer Seite, das Sie mit jQuery klonen möchten (z. B. um eine Eingabe mehrmals in einem Formular 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>
19
Steven Moseley

Erstellen Sie einen speicherinternen DIV

$("<div/>");

Fügen Sie Click-Handler, Stile usw. hinzu - 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 ians Antwort, aber ich habe kein Beispiel gefunden, das die Verwendung von Methoden innerhalb der Eigenschaftsobjektdeklaration richtig anspricht.

15
Roko C. Buljan

wenn Sie einfach ein HTML-Tag erstellen möchten, können Sie dies beispielsweise ausprobieren

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

wenn Sie ein Element auf dem Flay hinzufügen möchten, können Sie dies versuchen

selectBody.append(div);
9
MEAbid
<div id="foo"></div>

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

alternativ zu append () können Sie auch appendTo() mit einer anderen Syntax verwenden:

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

Wenn Sie Jquery> 1.4 verwenden, sind Sie am besten mit Ians Antwort . Ansonsten würde ich diese Methode verwenden:

Dies ist sehr ähnlich zu Celorons Antwort , aber ich weiß nicht, warum sie document.createElement anstelle der Jquery-Notation verwendeten.

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

Ich denke auch, dass die Verwendung von append() mit einer Rückruffunktion in diesem Fall besser lesbar ist, da Sie jetzt sofort feststellen, dass etwas an den Körper angehängt wird. Aber das ist Geschmackssache, wie immer beim Schreiben von Code oder Text.

Verwenden Sie im Allgemeinen so wenig HTML wie möglich in JQuery-Code, da dies meistens Spaghetti-Code ist. Es ist fehleranfällig und schwer zu pflegen, da der HTML-String leicht Tippfehler enthalten kann. Außerdem wird eine Auszeichnungssprache (HTML) mit einer Programmiersprache (Javascript/JQuery) gemischt, was normalerweise eine schlechte Idee ist.

6
nst1nctz

Sie können separate Tags mit der Methode .jquery() erstellen. Erstellen Sie untergeordnete Tags mit der Methode .append(). Da jQuery Verkettung unterstützt, können Sie CSS auch auf zwei Arten anwenden. Geben Sie es entweder in der Klasse an oder rufen Sie einfach .attr() auf:

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

Zuerst hänge ich ein Listentag an mein div-Tag an und füge JSON-Daten darin ein. Als Nächstes erstelle ich ein untergeordnetes Tag der Liste mit bestimmten Attributen. Ich habe den Wert einer Variablen zugewiesen, damit ich ihn leicht anhängen kann.

4
Shruthi Acharya

Ich denke, dies ist der beste Weg, um ein Div hinzuzufügen:

So hängen Sie ein Test-Div an das div-Element mit der ID div_id an:

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

Fügen Sie nun HTML zu diesem hinzugefügten Test-Div hinzu:

$("#test").append("Your HTML");
2
Atul

Wenn es sich nur um ein leeres Div handelt, ist dies ausreichend:

$("#foo").append("<div>")

oder

$("#foo").append("<div/>")

Es gibt das gleiche Ergebnis.

1
Vennsoh

Ich hoffe, das hilft beim Code. :) (Ich benutze)

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);
}
1
Cagdas

$(HTMLelement) kann es schaffen. Wenn Sie ein epmty div möchten, verwenden Sie es als $('<div></div>');. Sie können auch die anderen Elemente auf dieselbe Weise festlegen. Wenn Sie den inneren HTML-Code nach der Erstellung ändern möchten, können Sie die Methode html() verwenden. Um OuterHTML als Zeichenfolge zu erhalten, können Sie Folgendes verwenden:

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;
1

Sie können .add() verwenden, um eine neue jQuery zu erstellen. Objekt und zum Zielelement hinzufügen. Verwenden Sie dann die Verkettung, um fortzufahren.

Für zB 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>
0
Tushar