La creación de un elemento div en jQuery [duplicar]

Question

Esta pregunta ya tiene una respuesta aquí:

• jQuery documento.createElement equivalente? 13 respuestas

¿Cómo puedo crear una div elemento en jQuery?

Answer 1

Puede utilizar append (añadir en el último puesto de los padres) o prepend (añadir el puño en la posición de los padres):

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

Como alternativa, se puede utilizar el .html() o .add() como se mencionó en un diferente respuesta .

Answer 2

A partir de jQuery 1.4 puede transferir los atributos de un elemento de auto-cerrado de esta manera:

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

Aquí está en el Docs

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

Answer 3

Técnicamente $('<div></div>') será 'crear' un elemento div (o más específicamente un elemento DIV DOM), pero no lo añadirá a su documento HTML. A continuación, tendrá que utilizar en combinación con las otras respuestas que en realidad hacer algo útil con ella (por ejemplo, usando el método append() o similares).

Los href="http://docs.jquery.com/Manipulation" documentación de la manipulación que todas las diferentes opciones sobre cómo añadir nuevos elementos da.

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

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

Answer 7

Una forma corta de crear div es

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

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

Answer 8

Todos éstos trabajaron para mí,

HTML parte:

<div id="targetDIV" style="border: 1px solid Red">
    This text is surrounded by a DIV tag whose id is "targetDIV".
</div>

código JavaScript:

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

Esto creará nueva div con id "nuevo" en el cuerpo.

Answer 10

document.createElement('div');

Answer 11

Aquí es otra técnica para crear divs con jQuery.

ELEMENTO DE CLONACIÓN

Supongamos que tiene un div existente en su página que se desea clonar usando jQuery (por ejemplo, para duplicar una entrada de un número de veces en un formulario). Se podría hacerlo de la siguiente manera.

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

Crear un DIV en memoria

$("<div/>");

Agregar clic manipuladores, estilos, etc - y, finalmente, insertar en DOM en un selector de elemento 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 he encontrado ningún ejemplo que aborda adecuadamente el uso de métodos en las propiedades del objeto de declaración por lo que hay que ir.}

Answer 13

simplemente si desea crear cualquier etiqueta HTML que usted puede probar esto por ejemplo

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

si desea agregar algún elemento en el flay que usted puede probar esto

selectBody.append(div);

Answer 14

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

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

Answer 15

Si está usando jQuery> 1.4, que son los mejores de la de Ian respuesta . De lo contrario, me gustaría utilizar este método:

Esto es muy similar a la de Celoron respuesta , pero no sé por qué utilizaron document.createElement en lugar de Jquery notación.

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

también pienso usando append() con una función de devolución de llamada es en este caso más fácil de leer, ya que ahora inmediatamente que algo va a ser anexado al cuerpo. Pero eso es una cuestión de gusto, como siempre que escribir ningún código o texto.

En general, el uso como HTML menos posible con el código de jQuery, ya que es en su mayoría código espagueti. Es propenso a errores y difícil de mantener, debido a que el HTML-String puede contener errores tipográficos fácilmente. También, se mezcla un lenguaje de marcado (HTML) con un lenguaje de programación (Javascript / jQuery), que suele ser una mala idea.

Answer 16

alternativamente para anexar () también se puede utilizar appendTo() que tiene una sintaxis diferente:

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

Answer 17

Puede crear etiquetas separadas usando el método .jquery(). Y crear etiquetas hijo usando el método .append(). Como jQuery soporta el encadenamiento, también se puede aplicar CSS de dos maneras. Especificar que en la clase o simplemente llamar .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 anexando una etiqueta lista para mi etiqueta div y la inserción de datos JSON en ella. A continuación, estoy creando una etiqueta de niño de lista, siempre algún atributo. He asignado el valor de una variable, por lo que sería fácil para mí lo añaden.

Answer 18

Creo que esta es la mejor manera de añadir un div:

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

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

Ahora añadir HTML a este div ensayo añadida:

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

Answer 19

Si es sólo un div vacío, esto es suficiente:

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

o

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

Se da el mismo resultado.

Answer 20

Espero que ayude código. :) (utilizo)

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) éxito que puede. Si desea un div epmty lo utilizan como $('<div></div>');. También puede configurar los otros elementos por el mismo método. Si desea cambiar HTML interno después de creado se puede utilizar html() método. Para obtener outerHTML como cadena que puede utilizar es la siguiente:

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

Puede utilizar .add() para crear un nuevo jQuery objetos y añadir al elemento objetivo. Utilice encadenamiento entonces para seguir adelante.

Para 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>

Answer 23

¿Qué tal esto? Aquí, pElement se refiere al elemento que desea que esta div el interior (a ser un hijo de:!).

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

Se pueden añadir fácilmente cualquier cosa más para que <=> en la cadena - Atributos, contenido, lo que sea. Ten en cuenta, para los valores de los atributos, es necesario utilizar las comillas adecuadas.

Answer 24

acabo de hacer una pequeña plugin de jQuery para eso.

De ello se desprende que su sintaxis:

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

DOM ID de nodo se puede especificar como segundo parámetro:

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

¿Es grave? No. Pero esta sintaxis es mejor que $ ( "

") , y es un muy buen valor por el dinero.

(respuesta parcialmente copiado de: jQuery document.createElement equivalente )