dokument jQuery.createElement equivalent?

Po prostu podanie kodu HTML elementów, które chcesz dodać do konstruktora jQuery $() zwróci obiekt jQuery z nowo zbudowanego HTML, odpowiedni do dodania do DOM przy użyciu metody jQuery append().

Na przykład:

var t = $("<table cellspacing='0' class='text'></table>");
$.append(t);

Można następnie wypełnić tę tabelę programowo, jeśli chcesz.

Daje to możliwość określenia dowolnego kodu HTML, w tym nazw klas lub innych atrybutów, które mogą być bardziej zwięzłe niż użycie createElement i następnie ustawianie atrybutów takich jak cellSpacing i className przez JS.

Tworzenie nowych elementów DOM jest podstawową cechą metody jQuery(), patrz:

• http://api.jquery.com/jQuery/#creating-new-elements
• i w szczególności http://api.jquery.com/jQuery/#example-1-1

Od jQuery1.8, używając $.parseHTML() tworzenie elementów jest lepszym wyborem.

Istnieją dwie korzyści:

1.jeśli używasz starego sposobu, który może być czymś w rodzaju $(string), jQuery sprawdzi ciąg znaków, aby upewnić się, że chcesz wybrać znacznik html lub utworzyć nowy element. Używając $.parseHTML(), mówisz jQuery, że chcesz jawnie utworzyć nowy element, więc wydajność może być nieco lepsza.

2.o wiele ważniejsze jest to, że możesz cierpieć na cross site attack (więcej informacji) Jeśli używasz starego sposobu. jeśli masz coś takiego:

    var userInput = window.prompt("please enter selector");
    $(userInput).hide();

Zły facet może wprowadzić <script src="xss-attach.js"></script>, aby dokuczyć Ci. na szczęście, $.parseHTML() unikaj tego wstydu dla ciebie:

var a = $('<div>')
// a is [<div>​</div>​]
var b = $.parseHTML('<div>')
// b is [<div>​</div>​]
$('<script src="xss-attach.js"></script>')
// jQuery returns [<script src=​"xss-attach.js">​</script>​]
$.parseHTML('<script src="xss-attach.js"></script>')
// jQuery returns []

Należy jednak zauważyć, że a jest obiektem jQuery, podczas gdy {[10] } jest elementem html:

a.html('123')
// [<div>​123​</div>​]
b.html('123')
// TypeError: Object [object HTMLDivElement] has no method 'html'
$(b).html('123')
// [<div>​123​</div>​]

Robię tak:

$('<div/>',{
    text: 'Div text',
    class: 'className'
}).appendTo('#parentDiv');

UPDATE

Od najnowszych wersji jQuery następująca metoda nie przypisuje właściwości przekazywanych w drugim obiekcie

Poprzednia odpowiedź

Czuję, że używanie document.createElement('div') razem z jQuery jest szybsze:

$(document.createElement('div'), {
    text: 'Div text',
    'class': 'className'
}).appendTo('#parentDiv');

Mimo że jest to bardzo stare pytanie, pomyślałem, że byłoby miło zaktualizować je o najnowsze informacje; [10]}

Od jQuery 1.8 istnieje jQuery.funkcja parseHTML () , która jest obecnie preferowanym sposobem tworzenia elementów. Ponadto, istnieją pewne problemy z parsowaniem HTML przez $('(html code goes here)'), Przykład Oficjalna strona jQuery wspomina o następującym w jednej z ich uwag do wydania :

Swobodne parsowanie HTML: możesz ponownie mieć spacje wiodące lub newlines przed znacznikami w $(htmlString). Nadal zdecydowanie zalecamy, aby używasz $.parseHTML () podczas parsowania HTML uzyskanego z zewnętrznego źródeł, i może dokonywać dalszych zmian w parsowaniu HTML w przyszłość.

Aby odnieść się do faktycznego pytania, podanym przykładem można przetłumaczyć na:

this.$OuterDiv = $($.parseHTML('<div></div>'))
    .hide()
    .append($($.parseHTML('<table></table>'))
        .attr({ cellSpacing : 0 })
        .addClass("text")
    )
;

Co jest niestety mniej wygodne niż używanie tylko $(), ale daje większą kontrolę, na przykład możesz wykluczyć tagi skryptu (pozostawi Skrypty wbudowane, takie jak onclick chociaż):

> $.parseHTML('<div onclick="a"></div><script></script>')
[<div onclick=​"a">​</div>​]

> $.parseHTML('<div onclick="a"></div><script></script>', document, true)
[<div onclick=​"a">​</div>​, <script>​</script>​]

Również, oto benchmark z górnej odpowiedzi dostosowanej do nowej rzeczywistości:

Jsbin Link

JQuery 1.9.1

  $.parseHTML:    88ms
  $($.parseHTML): 240ms
  <div></div>:    138ms
  <div>:          143ms
  createElement:  64ms

Wygląda na to, że parseHTML jest znacznie bliżej createElement niż $(), ale po owinięciu wyników w nowy obiekt jQuery

var mydiv = $('<div />') // also works

var div = $('<div/>');
div.append('Hello World!');

Jest najkrótszym/najłatwiejszym sposobem tworzenia elementu DIV w jQuery.

Wszystko jest całkiem proste! Oto kilka szybkich przykładów...

var $example = $( XMLDocRoot );

var $element = $( $example[0].createElement('tag') );
// Note the [0], which is the root

$element.attr({
id: '1',
hello: 'world'
});

var $example.find('parent > child').append( $element );

Właśnie zrobiłem mały plugin jQuery do tego: https://github.com/ern0/jquery.create

Wynika z Twojej składni:

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

Identyfikator węzła DOM może być podany jako drugi parametr:

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

$("#container").append( $.create("div").addClass("box").html("Hello, world!") );

Wydaje się, że tworzenie elementów doprowadzi Cię tylko do tej pory. Po rozpoczęciu łączenia różnica w wydajności jest znikoma.

Http://jsperf.com/jquery-dom-node-creation

Czy coś przeoczyłem?

JQuery po wyjęciu z pudełka nie ma odpowiednika createElement. W rzeczywistości większość pracy jQuery jest wykonywana wewnętrznie za pomocą innerHTML zamiast czystej manipulacji DOM. Jak Adam wspomniał powyżej, w ten sposób można osiągnąć podobne wyniki.

Dostępne są również wtyczki, które wykorzystują DOM nad innerHTML jak appendDOM, DOMEC i FlyDOM Aby wymienić tylko kilka. Wydajnosci natywny jquery jest nadal najbardziej wydajny (glownie ze wzgledu na używa innerHTML)