Erstellen eines div-Elements in jQuery [Duplicate]

Question

    

Diese Frage bereits eine Antwort hier:

    

        
•              jQuery document.createElement gleichwertig?                                      13 Antworten                          
    

    

Wie kann ich ein div Element in erstellen jQuery

Answer 1

Sie können mit append oder prepend (an letzter Position der Eltern hinzuzufügen) (bis auf Faust Position der Eltern hinzugefügt werden):

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

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

Answer 2

Wie von jQuery 1.4 Sie Attribute zu einem selbst geschlossenem Elemente wie so passieren können:

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

Hier ist es in der Docs

Beispiele können in jQuery 1.4. Veröffentlicht: Die 15 neuen Funktionen, die Sie wissen müssen

Answer 3

Technisch $('<div></div>') wird ‚create‘ ein div Element (oder genauer gesagt ein DIV DOM-Element), aber wird es zu Ihrem HTML-Dokument hinzufügen. Sie müssen dann, dass mit den anderen Antworten in Kombination verwenden, um tatsächlich etwas Sinnvolles damit zu machen (wie die append()-Verfahren oder dergleichen).

Die Manipulation Dokumentation gibt Ihnen all die verschiedenen Möglichkeiten, wie neue Elemente hinzuzufügen.

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

wird eine leere div anhängen <div id="main"></div>

Answer 7

Ein kurzer Weg div schaffen ist

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

Jetzt kann die individuelle div an anderen div angehängt werden.

Answer 8

All dies für mich gearbeitet,

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>

Answer 9

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

Dieser wird neuen div mit der ID "neuer" in Körper.

Answer 10

document.createElement('div');

Answer 11

Hier ist eine andere Technik für divs mit jQuery zu schaffen.

ELEMENT CLONING

Angenommen, Sie ein vorhandenes div auf Ihrer Seite haben, die Sie wollen jQuery klonen mit (beispielsweise eine Eingabe mehrere Male in einer Form zu duplizieren). Sie würden so tun, wie folgt.

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

Erstellen Sie eine In-Memory-DIV

$("<div/>");

Klicken Sie auf Hinzufügen Handler, Stile usw. - und schließlich Einfügen in DOM in ein Ziel Elementselektoreinrichtung:

$("<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 Ians Antwort, aber ich fand kein Beispiel, dass die Verwendung von Methoden richtig Adressen innerhalb die Eigenschaften Erklärung Objekt so geben Sie gehen.}

Answer 13

einfach, wenn Sie eine HTML-Tag erstellen möchten, können Sie versuchen, diese zum Beispiel

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

Wenn Sie auf dem flay jedes Element hinzufügen Sie dies versuchen

selectBody.append(div);

Answer 14

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

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

Answer 15

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

Dies ist sehr ähnlich href="https://stackoverflow.com/a/6976126/3025256"> Celoron Antwort document.createElement Notation statt JQuery verwendet.

$("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 append() mit einer Callback-Funktion ist in diesem Fall besser lesbar, weil Sie jetzt sofort, dass etwas an den Körper angehängt werden. Aber das ist eine Frage des Geschmacks, wie immer, wenn beliebigen Code oder Text zu schreiben.

In der Regel verwendet als weniger HTML wie möglich in JQuery-Code, da dieser meist Spaghetti-Code ist. Es ist fehleranfällig und schwer zu pflegen, weil der HTML-String leicht Tippfehler enthält. Außerdem mischt eine Auszeichnungssprache (HTML) mit einer Programmiersprache (Javascript / Jquery), die in der Regel eine schlechte Idee ist.

Answer 16

alternativ anfügen () Sie können auch appendTo() verwendet werden, die eine andere Syntax hat:

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

Answer 17

Sie können die separaten Tags erstellen die .jquery() Methode. Und Kind-Tags erstellen, indem Sie die .append() Methode. Wie jQuery Verkettungs unterstützt, können Sie auch CSS auf zwei Arten anwenden. Entweder es in der Klasse angeben oder nur .attr() nennen:

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

Zum einen eine Liste Tag meine div-Tag Ich bin anhängt und JSON-Daten in sie eingefügt wird. Als nächst Ich bin ein Kind Tag der Liste erstellen, vorausgesetzt, einige Attribute. Ich habe den Wert einer Variablen zugewiesen, so dass es leicht sein würde, für mich anzuhängen.

Answer 18

Ich denke, dies ist der beste Weg, um einen div hinzuzufügen:

Um einen Test div auf das div-Element mit ID div_id anfügen:

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

Jetzt anhängen HTML zu diesem hinzugefügt Test div:

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

Answer 19

Wenn es nur ein leeres div ist, ist dies ausreichend:

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

oder

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

Es gibt das gleiche Ergebnis.

Answer 20

Ich hoffe, dass Code hilft. :) (ich verwende)

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

Answer 21

$(HTMLelement) kann Erfolg es. Wenn Sie ein epmty div als $('<div></div>'); verwenden möchten. Sie können auch die anderen Elemente mit dem gleichen Verfahren festgelegt. Wenn Sie innere HTML ändern möchten, nachdem erstellt Sie html() Methode verwenden können. Für erhalten Outerhtml als String können Sie ist wie folgt verwendet werden:

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;

Answer 22

Sie können .add() verwenden ein neue jQuery Objekt und fügen Sie das Zielelement zu schaffen. Verwenden Sie Verkettungs dann weiter zu verfahren ist.

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>

Answer 23

Wie wäre es damit? Hier bezieht sich pElement auf das Element Sie diese div innen wollen (ein Kind sein:!).

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

Sie leicht etwas mehr zu diesem div im String hinzufügen können - Attribute, Inhalt, nennen Sie es. beachten Sie, für Attributwerte, müssen Sie die richtigen Anführungszeichen verwenden.

Answer 24

Ich habe gerade einen kleinen jQuery-Plugin dafür.

Es folgt die Syntax:

var myDiv = $.create("div");

DOM Knoten-ID kann als zweiten Parameter angegeben werden:

var secondItem = $.create("div","item2");

Ist es ernst? Nein, aber diese Syntax ist besser als $ ( "

") , und es ist ein sehr guter Wert für das Geld.

(teilweise kopiert? Antwort: jQuery document.createElement Äquivalent )