Pregunta Creando un elemento div en jQuery [duplicado]


Esta pregunta ya tiene una respuesta aquí:

¿Cómo creo un div elemento en jQuery?


1362
2018-05-15 10:30


origen


Respuestas:


Puedes usar append (para agregar en la última posición del padre) o prepend (para agregar en la primera posición del padre):

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

Alternativamente, puedes usar el .html() o .add() como se menciona en un respuesta diferente.


940
2018-05-15 10:43



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

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

Aquí está en el Documentos

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


1867
2017-11-11 19:01



Técnicamente $('<div></div>') 'creará' un div elemento (o más específicamente un elemento DOM DIV) pero no lo agregará a su documento HTML. Luego necesitará usar eso en combinación con las otras respuestas para realmente hacer algo útil con él (como usar el append() método o similar).

los documentación de manipulación le brinda todas las diversas opciones sobre cómo agregar nuevos elementos.


218
2018-05-15 10:49



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

183
2017-08-07 22:08



div = $("<div>").html("Loading......");
$("body").prepend(div);    

71
2018-05-15 10:36



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

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


60
2018-05-15 10:34



Todo esto funcionó para mí,

Parte de HTML:

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

Código de 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>

51
2018-01-28 04:41



Una forma corta de crear div es

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

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


49
2018-02-25 03:46



$("<div/>").attr('id','new').appendTo('body');    

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


32
2018-02-03 15:56



document.createElement('div');

22
2018-06-17 12:15



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

ELEMENTO CLONADO

Supongamos que tiene un div existente en su página que desea clonar utilizando jQuery (por ejemplo, para duplicar una entrada varias veces en un formulario). Lo harías 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>


16
2017-11-27 13:16