Creazione di un elemento div in jQuery [duplicare]

Question

    

Questa domanda ha già una risposta qui:

    

        
•              jQuery document.createElement equivalente?                                      13 risposte                          
    

    

Come faccio a creare un elemento div in jQuery

Answer 1

È possibile utilizzare append (per aggiungere finalmente posizione del genitore) o prepend (da aggiungere alla posizione pugno di un genitore):

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

In alternativa, è possibile utilizzare il .html() o .add() come accennato in un diverso .

Answer 2

Come di jQuery 1.4 è possibile passare gli attributi ad un elemento auto-chiuso in questo modo:

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

Qui è in Docs

Gli esempi possono essere trovati a jQuery 1.4 Rilasciato:. Le 15 nuove funzionalità è necessario conoscere

Answer 3

Tecnicamente $('<div></div>') sarà 'creare' un elemento div (o più precisamente un elemento DIV DOM), ma non aggiungerà al tuo documento HTML. Sarà quindi necessario utilizzare che in combinazione con le altre risposte di fare effettivamente qualcosa di utile con esso (come ad esempio utilizzando il metodo append() o simili).

I href="http://docs.jquery.com/Manipulation" documentazione manipolazione tutte le varie opzioni su come aggiungere nuovi elementi dà.

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

aggiungerà un div vuoto per <div id="main"></div>

Answer 7

Un breve modo di creare div è

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

Ora il div personalizzato può essere aggiunto a qualsiasi altro div.

Answer 8

Tutte queste lavorato per me,

parte

HTML:

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

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

Questo creerà nuova div con id "nuova" in corpo.

Answer 10

document.createElement('div');

Answer 11

Ecco un'altra tecnica per la creazione div con jQuery.

ELEMENT CLONAZIONE

Dire che hai un div esistente nella pagina che si desidera clonare utilizzando jQuery (ad esempio per duplicare un ingresso di un certo numero di volte in una forma). Si potrebbe fare così come segue.

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

Crea un DIV in memoria

$("<div/>");

Aggiungi gestori di click, stili, ecc - e, infine, inserire nel DOM in un selettore di elemento di destinazione:

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

_{Simile alla risposta di Ian, ma ho trovato alcun esempio che affronti adeguatamente l'uso di metodi di nel le proprietà dell'oggetto dichiarazione così ci si va.}

Answer 13

semplicemente, se si desidera creare qualsiasi tag HTML si può provare questo ad esempio

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

se si desidera aggiungere qualsiasi elemento sul Flay si può provare questo

selectBody.append(div);

Answer 14

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

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

Answer 15

Se si sta utilizzando jQuery> 1.4, si sta meglio che con di Ian risposta . In caso contrario, vorrei utilizzare questo metodo:

Questo è molto simile a di Celoron risposta , ma io non so perché hanno usato document.createElement invece di Jquery notazione.

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

Penso anche utilizzando append() con una funzione di callback è in questo caso più leggibile, perché ora subito che qualcosa sta per essere aggiunto al corpo. Ma questa è una questione di gusto, come sempre quando scrivere alcun codice o il testo.

In generale, utilizzare il meno possibile in HTML come codice jQuery, dal momento che questo è in gran parte spaghetti code. E 'soggetto a errori e difficile da mantenere, perché l'HTML-String può facilmente contenere errori di battitura. Inoltre, si mescola un linguaggio di markup (HTML) con un linguaggio di programmazione (Javascript / Jquery), che di solito è una cattiva idea.

Answer 16

alternativamente per aggiungere () è anche possibile utilizzare appendTo() che ha una sintassi diversa:

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

Answer 17

È possibile creare tag separati utilizzando il metodo .jquery(). E creare tag di livello inferiore utilizzando il metodo .append(). Come jQuery supporta il concatenamento, è anche possibile applicare CSS in due modi. Specificare nella classe o semplicemente chiamare .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);

In primo luogo io sto aggiungendo un tag lista alla mia tag div e l'inserimento di dati JSON in esso. Avanti, sto creando un tag figlio di elenco, fornito qualche attributo. Ho assegnato il valore di una variabile, in modo che sarebbe stato facile per me aggiungerlo.

Answer 18

Credo che questo sia il modo migliore per aggiungere un div:

Per aggiungere un div di prova all'elemento div con ID div_id:

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

Ora aggiungere HTML a questo div prova aggiunto:

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

Answer 19

Se si tratta solo di un div vuoto, questo è sufficiente:

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

o

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

Si dà lo stesso risultato.

Answer 20

Mi auguro che aiuta codice. :) (io uso)

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) can successo che. Se si desidera un div epmty usarlo come $('<div></div>');. Inoltre è possibile impostare gli altri elementi con lo stesso metodo. Se si desidera modificare HTML interno dopo creata è possibile utilizzare html() metodo. Per ottenere outerHTML come stringa è possibile utilizzare è in questo modo:

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

È possibile utilizzare .add() per creare un nuovo jQuery oggetto e aggiungere l'elemento mirato. Utilizzare il concatenamento poi procedere ulteriormente.

Per esempio 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

Che ne dici di questo? Qui, pElement si riferisce all'elemento si desidera che questo div all'interno (per essere un figlio di:!).

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

Si può facilmente aggiungere altro a quello <=> nella stringa - Attributi, Contento, è il nome. Do atto, per i valori degli attributi, è necessario utilizzare le virgolette giuste.

Answer 24

Ho appena fatto un piccolo plugin jQuery per questo.

Si segue la sintassi:

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

DOM ID nodo può essere specificato come secondo parametro:

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

È una cosa seria? No. Ma questa sintassi è migliore di $ ( "

") , ed è un ottimo rapporto qualità quei soldi.

(risposta in parte copiato da:? jQuery document.createElement equivalente )