javascript - objetos - eliminar elementos de un div jquery




Creando un elemento div en jQuery (18)

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

Esta pregunta ya tiene una respuesta aquí:

¿Cómo creo un elemento div en jQuery ?



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>



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


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.


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.


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


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

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

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.


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

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


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

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

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

document.createElement('div');




jquery-append