Tworzenie elementu div w jQuery [duplicate]

Od jQuery 1.4 możesz przekazać atrybuty do elementu samozamykającego się tak:

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

Tutaj jest w Docs

Przykłady można znaleźć na jQuery 1.4 wydany: 15 nowych funkcji, które musisz znać .

Technicznie $('<div></div>') 'utworzy' element div (a dokładniej element domowy div), ale nie doda go do twojego dokumentu HTML. Następnie będziesz musiał użyć tego w połączeniu z innymi odpowiedziami, aby zrobić z nim cokolwiek użytecznego (np. używając metody append() lub podobnych).

Dokumentacja manipulacji daje Ci wszystkie różne opcje dodawania nowych elementów.

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

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

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

Doda pusty div do <div id="main"></div>

To wszystko dla mnie zadziałało.]}

Część HTML:

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

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

Krótki sposób tworzenia div to

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

Teraz Niestandardowy div może być dołączony do dowolnego innego div.

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

Spowoduje utworzenie nowego div z id " new " w ciele.

document.createElement('div');

Oto kolejna technika tworzenia divów z jQuery.

KLONOWANIE ELEMENTÓW

Powiedz, że masz istniejący div na swojej stronie, który chcesz sklonować za pomocą jQuery (np. aby zduplikować wejście kilka razy w formularzu). Zrobiłbyś to w następujący sposób.

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

Tworzenie DIV w pamięci

$("<div/>");

Dodaj obsługę kliknięć, style itp. - i na koniec wstaw do DOM {[7] } do selektora elementu docelowego:

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

_{podobne do odpowiedzi IANA, ale nie znalazłem żadnego przykładu, który poprawnie rozwiązuje użycie metod W deklaracja właściwości obiektu więc proszę bardzo.}

Po prostu jeśli chcesz utworzyć dowolny znacznik HTML możesz spróbować tego na przykład

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

Jeśli chcesz dodać jakiś element na flay możesz spróbować tego

selectBody.append(div);

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

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

Jeśli używasz Jquery > 1.4, najlepiej z odpowiedzią Iana . W przeciwnym razie użyłbym tej metody:

Jest to bardzo podobne do odpowiedzi celorona , ale nie wiem, dlaczego użyli document.createElement zamiast notacji 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;}"));

Myślę również, że użycie {[2] } z funkcją zwrotną jest w tym przypadku bardziej czytelne, ponieważ teraz natychmiast, że coś zostanie dołączone do ciała. Ale to kwestia gustu, jak zawsze przy pisaniu jakichkolwiek kod lub tekst.

Ogólnie rzecz biorąc, używaj jak najmniej kodu HTML w kodzie JQuery, ponieważ jest to głównie kod spaghetti. Jest podatny na błędy i trudny do utrzymania, ponieważ łańcuch HTML może łatwo zawierać literówki. Ponadto miesza język znaczników (HTML) z językiem programowania (Javascript/Jquery), co zwykle jest złym pomysłem.

Możesz utworzyć osobne znaczniki za pomocą metody .jquery(). I utwórz znaczniki potomne za pomocą metody .append(). Ponieważ jQuery obsługuje łączenie łańcuchowe, możesz również zastosować CSS na dwa sposoby. Albo określ go w klasie, albo po prostu wywołaj .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);

Najpierw dołączam znacznik listy do mojego znacznika div I wstawiam do niego dane JSON. Następnie tworzę znacznik potomny listy, pod warunkiem, że jest jakiś atrybut. Przypisałem wartość do zmiennej, więc łatwo byłoby mi ją dołączyć.

Ewentualnie dopisać() możesz również użyć appendTo(), który ma inną składnię:

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

Myślę, że to najlepszy sposób na dodanie div:

Aby dodać testowy div do elementu div o ID div_id:

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

Teraz dołącz HTML do tego dodanego testowego div:

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

Jeśli jest to tylko pusty div, to wystarczy:

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

Lub

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

Daje ten sam wynik.

Mam nadzieję, że to pomoże kodować. :) (Używam)

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

$(HTMLelement) może odnieść sukces. Jeśli chcesz epmty div użyj go jako $('<div></div>');. Możesz również ustawić inne elementy za pomocą tej samej metody. Jeśli chcesz zmienić wewnętrzny HTML po utworzeniu możesz użyć metody html(). Dla get outerHTML jako ciąg znaków można użyć Tak:

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;

Możesz użyć .add(), aby utworzyć nowy jQuery obiekt i dodać do elementu docelowego. Następnie użyj łączenia łańcuchowego, aby przejść dalej.

Dla eg 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>

Sprawdź jQuery.create () - wtyczka jQuery do tworzenia elementów HTML.

Co ty na to? Tutaj, pElement odnosi się do elementu, który chcesz to div wewnątrz(być dzieckiem! :).

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

Możesz łatwo dodać coś więcej do tego div w łańcuchu-atrybuty, treść, nazwę. Należy pamiętać, że dla wartości atrybutów należy użyć właściwych cudzysłowów.

Właśnie zrobiłem mały jQuery plugin do tego.

Wynika z Twojej składni:

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

DOM node ID może być podany jako drugi parametr:

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

Użycie:

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