javascript - eliminar - crear objetos jquery

Creando un elemento div en jQuery

Question

Esta pregunta ya tiene una respuesta aquí:

• jQuery document.createElement equivalente? 13 respuestas

¿Cómo creo un elemento div en jQuery ?

Answer 1

¿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.

Answer 2

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 .

Answer 3

Acabo de hacer un pequeño plugin de jQuery para eso.

Sigue tu sintaxis:

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

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

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

¿Es serio? No. Pero esta sintaxis es mejor que $ ("<div> </div>") , y es un valor muy bueno para ese dinero.

(Respuesta parcialmente copiada de: jQuery document.createElement equivalente? )

Answer 4

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

CLONACIÓN DE ELEMENTOS

Supongamos que tiene un div 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>

Answer 5

Compruebe jQuery.create () - complemento jQuery para crear elementos HTML .

Answer 6

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á.}

Answer 7

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

Answer 8

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

Answer 9

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>

Answer 10

Puede 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, puede usar .html() o .add() como se menciona en una respuesta diferente .

Answer 11

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.

Answer 12

Si es solo un div vacío, esto es suficiente:

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

o

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

Da el mismo resultado.

Answer 13

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

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

Answer 14

Todo esto me funcionó,

Parte 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  users</div>").appendTo("#targetDIV"); //appendTo: Append at inside bottom
</script>

//Way 2: prependTo()
<script type="text/javascript">
    $("<div>Hello,  users</div>").prependTo("#targetDIV"); //prependTo: Append at inside top
</script>

//Way 3: html()
<script type="text/javascript">
    $("#targetDIV").html("<div>Hello,  users</div>"); //.html(): Clean HTML inside and append
</script>

//Way 4: append()
<script type="text/javascript">
    $("#targetDIV").append("<div>Hello,  users</div>"); //Same as appendTo
</script>

Answer 15

Una forma corta de crear div es

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

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

Answer 16

Utilizar:

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

Creo que eso ayudará.

Answer 17

como alternativa a append () también puede usar appendTo() que tiene una sintaxis diferente:

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

Answer 18

simplemente, si desea crear una etiqueta HTML, 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 puede probar esto

selectBody.append(div);

Answer 19

$(HTMLelement) puede tener éxito. Si desea un div epmty, utilícelo como $(''<div></div>''); . También puede configurar los otros elementos por el mismo método. Si desea cambiar el HTML interno después de crearlo, puede usar el método html() . Para obtener outerHTML como cadena que puede usar es así:

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 20

Si está utilizando Jquery> 1.4, es mejor con la respuesta de Ian . De lo contrario, usaría este método:

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

$("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 creo que el uso de append() con una función de devolución de llamada en este caso es más legible, porque ahora de inmediato se va a append() algo al cuerpo. Pero eso es una cuestión de gusto, como siempre al escribir cualquier código o texto.

En general, use el menor código HTML posible en el código JQuery, ya que se trata principalmente de código spaghetti. Es propenso a errores y difícil de mantener, porque la cadena HTML puede contener errores tipográficos fácilmente. Además, mezcla un lenguaje de marcado (HTML) con un lenguaje de programación (Javascript / Jquery), que suele ser una mala idea.

Answer 21

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

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

Answer 22

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

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

Answer 23

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

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

Answer 24

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 25

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

Answer 26

document.createElement(''div'');