Een div-element in jQuery maken

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

Antwoord 13

alleen als je een HTML-tag wilt maken, kun je dit proberen
bijvoorbeeld

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

als je een element op de kaart wilt toevoegen, kun je dit proberen

selectBody.append(div);

Antwoord 14

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

Antwoord 15

Als u JQuery > 1.4, je bent het beste af met Ian’s antwoord. Anders zou ik deze methode gebruiken:

Dit lijkt erg op het antwoord van celoron, maar ik weet niet waarom ze document.createElementin plaats van JQuery-notatie.

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

Ik denk ook dat het gebruik van append()met een callback-functie in dit geval beter leesbaar is, omdat je nu meteen weet dat er iets aan de body wordt toegevoegd. Maar dat is een kwestie van smaak, zoals altijd bij het schrijven van een code of tekst.

Gebruik in het algemeen als minder mogelijk HTML in jQuery-code, omdat dit meestal spaghetti-code is. Het is foutgevoelig en moeilijk te onderhouden, omdat de HTML-string gemakkelijk typefouten kan bevatten. Ook mengt het een Markup-taal (HTML) met een programmeertaal (JavaScript / JQuery), wat meestal een slecht idee is.

Antwoord 16

alternatief om toe te voegen ()
U kunt ook appendTo()gebruiken met een andere syntaxis:

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

Antwoord 17

U kunt afzonderlijke tags maken met behulp van de .jquery()-methode. En maak kindertags met behulp van de .append()-methode. Zoals jQuery chaining ondersteunt, kunt u ook op twee manieren CSS toepassen.
Specificeer het in de klas of bel gewoon .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);

Ten eerste ben ik aan het toevoegen van een lijst-tag aan mijn div-tag en het invoegen van JSON-gegevens erin. Vervolgens maak ik een kindertag van de lijst, mits een attribuut. Ik heb de waarde toegewezen aan een variabele, zodat het me gemakkelijk zou zijn om het toe te voegen.

Antwoord 18

Ik denk dat dit de beste manier is om een ​​div toe te voegen:

Om een ​​test bij te voegen aan het div-element met ID DIV_ID:

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

Voeg nu HTMLtoe aan deze toegevoegde test-div:

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

Antwoord 19

Ik hoop dat dat helpt bij het coderen. 🙂 (ik gebruik)

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

Antwoord 20

Als het gewoon een lege div is, is dit voldoende:

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

of

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

Het geeft hetzelfde resultaat.

Antwoord 21

$(HTMLelement)kan het wel. Als je een lege div wilt, gebruik deze dan als $('<div></div>');. U kunt ook de andere elementen op dezelfde manier instellen. Als u de interne HTML wilt wijzigen nadat deze is gemaakt, kunt u de html()-methode gebruiken. Voor het verkrijgen van outerHTML als tekenreeks die u kunt gebruiken, is dit als volgt:

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;

Antwoord 22

U kunt .add()gebruiken om een nieuw jQueryobjectte maken en aan het doelelement toe te voegen . Gebruik dan ketenen om verder te gaan.

Voor bijvoorbeeld 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>

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

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

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