Jquery document.createElement atitinka?

Atkursiu senąjį javascript kodą, ir yra daug DOM manipuliacijų.

 var d = document; var odv = d.createElement("div"); odv.style.display = "none"; this.OuterDiv = odv; var t = d.createElement("table"); t.cellSpacing = 0; t.className = "text"; odv.appendChild(t); 

Norėčiau sužinoti, ar yra geresnis būdas tai padaryti su jQuery. Eksperimentavau:

 var odv = $.create("div"); $.append(odv); // And many more 

Bet aš nesu įsitikinęs, kas yra geriausia.

1066
06 нояб. įkūrė Rob Stevenson-Leggett 06 nov. 2008-11-06 15:26 '08 at 15:26 2008-11-06 15:26
@ 13 atsakymų

Štai jūsų pavyzdys „viena“ eilutėje.

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

Atnaujinimas: maniau, kad atnaujinu šį įrašą, nes jis vis dar gauna daug srauto. Toliau pateiktose pastabose aptariamas $("<div>") ir $("<div></div>") ir $(document.createElement('div')) kaip būdas sukurti naujus elementus ir kuris yra "geriausias" ".

Surinkiau nedidelį testą , ir čia aptariau minėtus variantus 100 000 kartų:

jQuery 1.4, 1.5, 1.6

  Chrome 11 Firefox 4 IE9 <div> 440ms 640ms 460ms <div></div> 420ms 650ms 480ms createElement 100ms 180ms 300ms 

jQuery 1.3

  Chrome 11 <div> 770ms <div></div> 3800ms createElement 100ms 

jQuery 1.2

  Chrome 11 <div> 3500ms <div></div> 3500ms createElement 100ms 

Manau, kad tai nėra didelis siurprizas, tačiau document.createElement yra greičiausias būdas. Žinoma, prieš išvykdami ir pradėdami naują savo kodo bazę, nepamirškite, kad skirtumai, apie kuriuos kalbame čia (visuose, išskyrus archajiškus „jQuery“ variantus), yra apie 3 milisekundes už tūkstantį elementų.

2 naujinimas

Atnaujinta „jQuery 1.7.2“ ir atlikite „JSBen.ch“ testą, kuris tikriausiai yra šiek tiek labiau išmokytas nei mano pirminiai testai, ir dabar galite naudoti „crowdsourcing“!

http://jsben.ch/#/ARUtz

1149
06 нояб. atsakymas pateikiamas nickf 06 lapkričio. 2008-11-06 15:34 '08 at 15:34 2008-11-06 15:34

Tiesiog pateikdami HTML elementus, kuriuos norite pridėti prie jQuery $() konstruktoriaus, grįžtamasis jQuery objektas bus grąžintas iš naujai sukurto HTML, tinkančio pridėti prie DOM naudojant jQuery append() metodą.

Pavyzdžiui:

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

Po to galite užpildyti šią lentelę, jei norite.

Tai suteikia jums galimybę nurodyti bet kokį norimą HTML createElement , įskaitant klasės pavadinimus ar kitus atributus, kurie gali būti glaustesni nei naudojant „ createElement , ir tada cellSpacing tokius atributus kaip cellSpacing ir className per JS.

116
06 нояб. atsakymą pateikė Adam Bellaire 06 nov. 2008-11-06 15:30 '08, 15:30, 2008-11-06 15:30

Naujų „DOM“ elementų kūrimas yra pagrindinis „ jQuery() metodo bruožas, žr.

Sveikinimai.

57
15 июля '10 в 10:14 2010-07-15 10:14 atsakymą pateikė abernier liepos 15 d. 10:14 2010-07-15 10:14

nuo jQuery1.8 , naudojant $.parseHTML() norint sukurti elementus, yra geriausias pasirinkimas.

Yra du privalumai:

1. Jei naudojate seną metodą, kuris gali būti kažkas panašaus į $(string) , jQuery tikrina eilutę, kad įsitikintų, jog norite pasirinkti html žymą arba sukurti naują elementą. Naudodami $.parseHTML() , pasakysite jQuery, kad norite aiškiai sukurti naują elementą, todėl našumas gali būti šiek tiek geresnis.

2. Dar svarbiau yra tai, kad naudodami senąjį metodą galite patirti ataką per svetainę ( daugiau ). jei turite kažką panašaus:

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

Blogas vaikinas gali įvesti <script src="xss-attach.js"></script> kad jus <script src="xss-attach.js"></script> . Laimei, $.parseHTML() vengia jums šio $.parseHTML() :

 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 [] 

Tačiau atkreipkite dėmesį, kad a yra jQuery objektas, o b yra html elementas:

 a.html('123') // [<div>​123​</div>​] b.html('123') // TypeError: Object [object HTMLDivElement] has no method 'html' $(b).html('123') // [<div>​123​</div>​] 
36
24 янв. Atsakymą pateikė Brian Jan 24. 2013-01-24 06:01 '13, 6:01 am 2013-01-24 06:01

Manau, kad naudojant document.createElement('div') su jQuery yra greitesnis:

 $( document.createElement('div') ,{ text: 'Div text', 'class': 'className' }).appendTo('#parentDiv'); 
30
18 июня '13 в 8:53 2013-06-18 08:53 atsakymą pateikė Om Shankar birželio 18 d., 13 val., 8:53, 2013-06-18 08:53

Aš tai darau:

 $('<div/>',{ text: 'Div text', class: 'className' }).appendTo('#parentDiv'); 
28
24 нояб. Atsakymą pateikė kami lapkričio 24 d. 2012-11-24 21:07 '12 - 21:07 2012-11-24 21:07

Nors tai labai senas klausimas, maniau, kad būtų malonu atnaujinti ją naujausia informacija;

Kadangi jQuery 1.8 yra funkcija jQuery.parseHTML () , kuri dabar yra pageidaujamas būdas sukurti elementus. Be to, yra keletas problemų, susijusių su HTML analizavimu per $('(html code goes here)') , pavyzdžiui, oficialiame jQuery tinklalapyje vienoje iš išleidimo pastabų minimi šie dalykai:

Atsipalaidavęs HTML analizavimas: galite vėl turėti pirmaujančių erdvių arba naujų linijų prieš žymes $ (htmlString). Vis dar primygtinai rekomenduojame naudoti $ .parseHTML (), kai analizuojate HTML iš išorinių šaltinių, ir ateityje gali atlikti papildomus HTML analizės pakeitimus.

Norint, kad jis atitiktų tikrąjį klausimą, pateiktas pavyzdys gali būti išverstas į:

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

kuri, deja, yra mažiau patogi nei tik $() , tačiau ji suteikia jums daugiau kontrolės, pavyzdžiui, galite išskirti scenarijų žymes (ji paliks integruotus scenarijus, pvz., onclick ):

 > $.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>​] 

Be to, šiuo atveju aukščiausio atsakymo etalonas sureguliuotas pagal naują tikrovę:

„Jsbin“ nuoroda

jQuery 1.9.1

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

Atrodo, kad parseHTML daug arčiau createElement nei $() , bet visi greitėjimai išnyko, kai rezultatai buvo perkelti į naują jQuery objektą

23
29 сент. atsakymą adamziel pateikė 29 sep . 2013-09-29 22:01 '13, 10:01 pm 2013-09-29 22:01
 var mydiv = $('<div />') // also works 
11
17 нояб. Atsakymą pateikė Shimon Doodkin lapkričio 17 d. 2010-11-17 20:03 '10, 20:03, 2010-11-17 20:03
 var div = $('<div/>'); div.append('Hello World!'); 

Tai trumpiausias / paprasčiausias būdas sukurti DIV elementą jQuery.

6
23 дек. Atsakymas pateikiamas AcidicChip 23 d. 2010-12-23 01:43 '10 ne 1:43 2010-12-23 01:43

Aš ką tik padariau mažą „jQuery“ papildinį: https://github.com/ern0/jquery.create

Tai atitinka jūsų sintaksę:

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

DOM mazgo identifikatorius gali būti nurodytas kaip antrasis parametras:

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

Ar tai rimta? Ne Tačiau ši sintaksė yra geresnė nei $ ("<div> </ div>"), ir tai yra labai gera vertė šiems pinigams.

Esu naujas „jQuery“ vartotojas, perjungiantis iš DOMAssistant, kuris turi panašią funkciją: http://www.domassistant.com/documentation/DOMAssistantContent-module.php

Mano įskiepis yra paprastesnis, manau, kad patrauklumą ir turinį reikia papildyti grandinėmis.

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

Be to, tai yra geras pavyzdys paprastam jQuery įskiepiui (100-čiai).

4
15 авг. atsakymas pateikiamas ern0 15 rug . 2013-08-15 17:49 '13, 17:49, 2013-08-15 17:49

Viskas yra gana paprasta! Štai keletas greitų pavyzdžių ...


 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 ); 
4
25 мая '10 в 20:17 2010-05-25 20:17 Atsakymą davė Randy gegužės 25 d. 10 val. 20:17 2010-05-25 20:17

Atrodo, kad elemento sukūrimas pasieks jus. Pradėję grandinę, našumo skirtumas yra mažas.

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

Ar kažką praleidau?

1
28 февр. LukeAskew atsakė 28 vasario mėn. 2013-02-28 02:59 '13, 2:59, 2013-02-28 02:59

Iš dėžutės esantis jQuery neturi elemento „CreateElement“ ekvivalento. Iš tiesų, dauguma jQuery darbų atliekami viduje naudojant internalHTML per gryną DOM manipuliavimą. Kaip minėjo Adomas, galite pasiekti panašius rezultatus.

Yra ir papildomų priedų, kurie naudoja DOM per internalHTML , pvz., „ AppendDOM“ , „ DOMEC“ ir „ FlyDOM“ . Veiksmingas išmintingas, įterptinis žaisti vis dar yra efektyviausias (daugiausia dėl to, kad naudoja vidinįHTML)

0
06 нояб. James Hughes atsakymas 2008-11-06 15:35 '08 at 15:35 2008-11-06 15:35

Kiti klausimai apie „ žymes arba Užduoti klausimą