javascript crear - Creando un elemento div en jQuery





elementos dinamicamente (22)


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

Esta pregunta ya tiene una respuesta aquí:

¿Cómo creo un elemento div en jQuery ?




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




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

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




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






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>



Utilizar:

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

Creo que eso ayudará.




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.




Una forma corta de crear div es

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

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




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>




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>




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.




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



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

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



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? )




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



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



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

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

o

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

Da el mismo resultado.




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

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




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




Si solo está manejando el desplazamiento hacia un elemento de entrada, puede usar focus() . Por ejemplo, si desea desplazarse a la primera entrada visible:

$(':input:visible').first().focus();

O la primera entrada visible en un contenedor con clase .error :

$('.error :input:visible').first().focus();

Gracias a Tricia Ball por señalar esto!





javascript jquery html append jquery-append