Erstellen eines div-Elements in jQuery

Question

Wie kann ich eine div Element in jQuery ?

Answer 1

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

Dies ist sehr ähnlich wie Antwort von celoron aber ich weiß nicht, warum sie die document.createElement anstelle der Jquery-Notation.

$("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 Callback-Funktion ist in diesem Fall besser lesbar, weil man jetzt sofort weiß, dass etwas an den Body angehängt wird. Aber das ist Geschmackssache, wie immer beim Schreiben eines Codes oder Textes.

Verwenden Sie im Allgemeinen so wenig HTML wie möglich im JQuery-Code, da es sich dabei meist um Spaghetti-Code handelt. Er 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) vermischt, was normalerweise eine schlechte Idee ist.

Answer 2

Sie können separate Tags erstellen, indem Sie die .jquery() Methode. Und erstellen Sie Child-Tags mit der Methode .append() Methode. Da jQuery die Verkettung unterstützt, können Sie CSS auch auf zwei Arten anwenden. Entweder Sie geben es in der Klasse an oder rufen einfach .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);

Zunächst füge ich ein Listen-Tag an mein div-Tag an und füge JSON-Daten darin ein. Als Nächstes erstelle ich ein untergeordnetes Tag der Liste, das ein Attribut enthält. Ich habe den Wert einer Variablen zugewiesen, so dass es für mich einfach wäre, ihn anzuhängen.

Answer 3

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

Anhängen eines Test-Divs an das Div-Element mit der ID div_id:

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

Jetzt anhängen HTML zu diesem hinzugefügten Test-Div:

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

Answer 4

Ich hoffe, das hilft dem 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);
}

Answer 5

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

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

o

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

Das Ergebnis ist dasselbe.