javascript crear elementos - Creando un elemento div en jQuery




13 Answers

A partir de jQuery 1.4, puede pasar atributos a un elemento de cierre automático, como:

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

Aquí está en los Docs

Se pueden encontrar ejemplos en jQuery 1.4 Lanzado: Las 15 nuevas características que debe conocer .

dinamicamente html con

Esta pregunta ya tiene una respuesta aquí:

¿Cómo creo un elemento div en jQuery ?




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



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

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




Una forma corta de crear div es

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

Ahora el div personalizado puede ser añadido a cualquier otro div.




document.createElement('div');



Crear un DIV en memoria

$("<div/>");

Agregue controladores de clic, estilos, etc. - y finalmente insértelos 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 ya está.




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

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



Puedes 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. .attr() 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, estoy agregando una etiqueta de lista a mi etiqueta div e insertando datos JSON en ella. A continuación, estoy creando una etiqueta secundaria de lista, siempre que se proporcione algún atributo. He asignado el valor a una variable, por lo que me sería fácil agregarlo.




Creo que esta es la mejor manera de agregar un div:

Para añadir un div de prueba al elemento div con ID div_id:

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

Ahora agregue HTML a este div de prueba agregado:

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



Espero que eso ayude a codificar. :) (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);
}



Puede usar .add() para crear un nuevo objeto jQuery y agregarlo al elemento de destino. Utilice el encadenamiento 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>




¿Qué tal esto? Aquí, pElement refiere al elemento que desea que pElement (¡para ser un hijo de! :)

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

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




Utilizar:

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

Creo que eso ayudará.




Related