[javascript] Creando un elemento div en jQuery


Answers

A partir de jQuery 1.4 puede pasar atributos a un elemento de autocompletado de la siguiente manera:

jQuery('<div/>', {
    id: 'foo',
    href: 'http://google.com',
    title: 'Become a Googler',
    rel: 'external',
    text: 'Go to Google!'
}).appendTo('#mySelector');

Aquí está en los Docs

Los ejemplos se pueden encontrar en jQuery 1.4 Released: Las 15 nuevas características que debe conocer .

Question

Esta pregunta ya tiene una respuesta aquí:

¿Cómo creo un elemento div en jQuery ?




$("<div/>").appendTo("div#main");

agregará un div en blanco a <div id="main"></div>




Utilizar:

$("#parentDiv").append("<div id='childDiv'>new div to be produced</div>");

Creo que eso ayudará.




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

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



Una forma corta de crear div es

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

Ahora el div personalizado se puede agregar a cualquier otro div.




Crear un DIV en memoria

$("<div/>");

Agregue manejadores de clics, estilos, etc., y finalmente inserte en DOM en un selector de elementos de destino:

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

Similar a la respuesta de Ian, pero no encontré ningún ejemplo que aborde adecuadamente el uso de métodos dentro de la declaración del objeto de propiedades, así que ahí está.




Espero que eso ayude al código. :) (Yo suelo)

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



document.createElement('div');



alternativamente para agregar () también puede usar appendTo() que tiene una sintaxis diferente:

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



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



¿Qué tal esto? Aquí, pElement refiere al elemento que desea que div este dentro (¡ser hijo de! :).

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

Puede agregar fácilmente cualquier cosa más a ese div en la cadena - Atributos, Contenido, lo que sea. Tenga en cuenta que, para los valores de los atributos, debe utilizar las comillas correctas.




Puede crear etiquetas separadas usando el método .jquery() . Y cree etiquetas secundarias utilizando el método .append() . Como jQuery admite el encadenamiento, también puede aplicar CSS de dos maneras. O especifíquelo en la clase o simplemente llame a .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);

En primer lugar, agrego una etiqueta de lista a mi etiqueta div e inserto datos JSON en ella. A continuación, estoy creando una lista secundaria de lista, siempre que tenga algún atributo. Le asigné el valor a una variable, por lo que sería fácil para mí agregarlo.




Puede usar .add() para crear un nuevo objeto jQuery y agregarlo al elemento específico. Use encadenamiento luego para continuar.

Por ejemplo, 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>




Links