jQuery document.createElement සමානද?

මම පැරණි ජාවාස්ක්‍රිප්ට් කේත නැවත ප්‍රතිනිර්මාණය කරමින් සිටින අතර DOM හැසිරවීම් විශාල ප්‍රමාණයක් සිදුවෙමින් පවතී.

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

JQuery භාවිතා කර මෙය කිරීමට වඩා හොඳ ක්‍රමයක් තිබේදැයි දැන ගැනීමට මම කැමතියි. මම අත්හදා බැලුවෙමි:

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

නමුත් මෙය වඩා හොඳ දැයි මට විශ්වාස නැත.

මෙන්න "එක්" පේළියේ ඔබේ උදාහරණය.

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

යාවත්කාලීන කිරීම : මෙම පෝස්ට් එක තවමත් තදබදයක් ඇති බැවින් එය යාවත්කාලීන කිරීමට මම සිතුවෙමි. පහත දැක්වෙන අදහස් දැක්වීමේදී $("<div>")එදිරිව $("<div></div>")එදිරිව $(document.createElement('div'))නව මූලද්‍රව්‍යයන් නිර්මාණය කිරීමේ ක්‍රමයක් ලෙස යම් සාකච්ඡාවක් ඇති අතර එය "හොඳම" වේ.

මම කුඩා මිණුම් දණ්ඩක් එක් කළ අතර , ඉහත විකල්ප 100,000 වාරයක් පුනරාවර්තනය කිරීමේ ප්‍රති results ල මෙහි දැක්වේ:

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

මම හිතන්නේ එය ලොකු පුදුමයක් නොවේ, නමුත් document.createElementවේගවත්ම ක්‍රමයයි. ඇත්ත වශයෙන්ම, ඔබ පිටත්ව ගොස් ඔබේ සම්පූර්ණ කේත පදනම නැවත ප්‍රතිනිර්මාණය කිරීමට පෙර, අප මෙහි කතා කරන වෙනස්කම් (jQuery හි පෞරාණික අනුවාදයන් හැර) මූලද්‍රව්‍ය දහසකට අමතර මිලි තත්පර 3 කට සමාන බව මතක තබා ගන්න .

යාවත්කාලීන 2

JQuery 1.7.2 සඳහා යාවත්කාලීන කර JSBen.chඇති අතර, මගේ ප්‍රාථමික මිණුම් සලකුණු වලට වඩා තරමක් විද්‍යාත්මක විය හැකි මිණුම් ලකුණ තබන්න, එය දැන් සෙනග පිරී ඉතිරී යා හැකිය!

http://jsben.ch/#/ARUtz

ඔබට jQuery ඉදිකිරීම්කරුවකුට එක් කිරීමට අවශ්‍ය මූලද්‍රව්‍යයන්ගේ HTML සරලව සැපයීම $()මඟින් අළුතින් සාදන ලද HTML වෙතින් jQuery වස්තුවක් ආපසු ලබා දෙනු ඇත, එය jQuery append()ක්‍රමවේදය භාවිතයෙන් DOM සමඟ එකතු කිරීමට සුදුසු වේ .

උදාහරණයක් වශයෙන්:

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

ඔබට අවශ්‍ය නම් ක්‍රමලේඛිකව මෙම වගුව ජනගහනය කළ හැකිය.

පංති නම් හෝ වෙනත් ගුණාංග ඇතුළුව ඔබ කැමති ඕනෑම අත්තනෝමතික HTML එකක් නියම කිරීමට මෙය ඔබට හැකියාව ලබා දෙයි, ඒවා භාවිතා කිරීමට වඩා සංක්ෂිප්ත විය හැකි createElementඅතර පසුව JS වැනි cellSpacingසහ ඒ classNameහරහා ගුණාංග සැකසෙනු ඇත.

නව DOM මූලද්‍රව්‍ය නිර්මාණය කිරීම jQuery()ක්‍රමයේ මූලික ලක්ෂණයකි , බලන්න:

• http://api.jquery.com/jQuery/#creating-new-elements
• සහ විස්තර http://api.jquery.com/jQuery/#example-1-1

මම එහෙම කරනවා:

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

සිට jQuery1.8භාවිතා $.parseHTML()අංග නිර්මාණය කිරීමට වඩා හොඳ තේරීම වේ.

වාසි දෙකක් තිබේ:

1. ඔබ පැරණි ක්‍රමය භාවිතා කරන්නේ නම්, එය වැනි දෙයක් විය හැකිය $(string), ඔබට html ටැගයක් තෝරා ගැනීමට හෝ නව අංගයක් සෑදීමට අවශ්‍ය දැයි තහවුරු කර ගැනීම සඳහා jQuery විසින් නූල පරීක්ෂා කරනු ඇත. භාවිතා කිරීමෙන් $.parseHTML(), ඔබ jQuery වෙත පවසන්නේ ඔබට නව අංගයක් පැහැදිලිවම නිර්මාණය කිරීමට අවශ්‍ය බවය, එබැවින් කාර්ය සාධනය ටිකක් හොඳ විය හැකිය.

2. වඩා වැදගත් දෙය නම් ඔබ පැරණි ක්‍රමය භාවිතා කරන්නේ නම් හරස් අඩවි ප්‍රහාරයකින් ( වැඩි විස්තර ) ඔබ පීඩා විඳිය හැකිය . ඔබට එවැනි දෙයක් තිබේ නම්:

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

නරක පුද්ගලයෙකුට <script src="xss-attach.js"></script>ඔබව විහිළුවට ලක් කළ හැකිය . වාසනාවකට මෙන්, $.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 []

කෙසේ වෙතත්, එය html මූලද්‍රව්‍යයක් වන aඅතර bඑය jQuery වස්තුවක් බව කරුණාවෙන් සලකන්න:

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

යාවත්කාලීන කරන්න

JQuery හි නවතම අනුවාදයන් අනුව, පහත දැක්වෙන ක්‍රමය දෙවන වස්තුවෙහි සම්මත ගුණාංග පවරන්නේ නැත

පෙර පිළිතුර

මට දැනෙන්නේ document.createElement('div')එකට භාවිතා jQueryකිරීම වේගවත් බවයි:

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

මෙය ඉතා පැරණි ප්‍රශ්නයක් වුවද, මෑත තොරතුරු සමඟ එය යාවත්කාලීන කිරීම හොඳ යැයි මම සිතුවෙමි;

JQuery 1.8 සිට jQuery.parseHTML () ශ්‍රිතයක් ඇති අතර එය දැන් මූලද්‍රව්‍ය නිර්මාණය කිරීමේ වඩාත් කැමති ක්‍රමයකි. එසේම, HTML හරහා විග්‍රහ කිරීමේදී ගැටළු කිහිපයක් තිබේ $('(html code goes here)'), උදාහරණයක් ලෙස නිල jQuery වෙබ් අඩවිය ඔවුන්ගේ එක් නිකුතුවක පහත සඳහන් දේ සඳහන් කරයි :

ලිහිල් කළ HTML විග්‍රහ කිරීම: in (htmlString) ටැග් කිරීමට පෙර ඔබට නැවත වරක් ප්‍රමුඛ අවකාශ හෝ නව රේඛා තිබිය හැකිය. බාහිර ප්‍රභවයන්ගෙන් ලබාගත් HTML විග්‍රහ කිරීමේදී ඔබ $ .parseHTML () භාවිතා කරන ලෙස අපි තවමත් තරයේ අවවාද කරමු, අනාගතයේදී HTML විග්‍රහ කිරීමේදී තවදුරටත් වෙනස්කම් සිදු කරනු ඇත.

සත්‍ය ප්‍රශ්නයට සම්බන්ධ වීමට, සපයා ඇති උදාහරණය පහත පරිදි පරිවර්තනය කළ හැකිය:

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

එය අවාසනාවකට සාධාරණ ලෙස භාවිතා කිරීමට වඩා පහසු නැත $(), නමුත් එය ඔබට වැඩි පාලනයක් ලබා දෙයි, උදාහරණයක් ලෙස ඔබට ස්ක්‍රිප්ට් ටැග් බැහැර කිරීමට තෝරා ගත හැකිය (එය පේළිගත ස්ක්‍රිප්ට් වැනි දේ ඉතිරි කරයි 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>​]

එසේම, නව යථාර්ථයට ගැලපෙන ඉහළ පිළිතුරේ මිණුම් ලකුණක් මෙන්න:

JSbin සබැඳිය

jQuery 1.9.1

  $ .පාර්ස්එච්ටීඑම්එල්: මීටර් 88 යි
  $ (par. parseHTML): 240ms
  <div> </div>: 138ms
  <div>: 143ms
  createElement: 64ms

එය parseHTMLවඩා බොහෝ සමීප බව createElementපෙනේ $(), නමුත් ප්‍රති j ල නව jQuery වස්තුවකට එතීමෙන් පසු සියලු තල්ලුව නැති වී යයි

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

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

JQuery හි DIV අංගයක් නිර්මාණය කිරීමට ඇති කෙටිම / පහසුම ක්‍රමය වේ.

මම ඒ සඳහා කුඩා jQuery ප්ලගිනයක් සාදා ඇත: https://github.com/ern0/jquery.create

එය ඔබගේ වාක්‍ය ඛණ්ඩය අනුගමනය කරයි:

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

DOM node ID දෙවන පරාමිතිය ලෙස දැක්විය හැකිය:

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

එය බරපතලද? නැත, නමුත් මෙම වාක්‍ය ඛණ්ඩය $ ("<div> </div>") ට වඩා හොඳයි, එය එම මුදල් සඳහා ඉතා හොඳ අගයක්.

මම නව jQuery පරිශීලකයෙක්, DOMAssistant වෙතින් මාරු වෙමි, එයට සමාන කාර්යයක් ඇත: http://www.domassistant.com/documentation/DOMAssistantContent-module.php

මගේ ප්ලගිනය වඩාත් සරල ය, දම්වැල් ක්‍රම මඟින් එකතු කිරීම සහ අන්තර්ගතය එකතු කිරීම වඩා හොඳ යැයි මම සිතමි:

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

එසේම, එය සරල jQuery-plugin (100 වන එක) සඳහා හොඳ උදාහරණයකි.

මේ සියල්ලම කෙළින්ම ඉදිරියට! ඉක්මන් උදාහරණ කිහිපයක් මෙන්න ...

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

පෙර පිළිතුරු වල සඳහන් කර නැත, එබැවින් මම නවතම jQuery සමඟ මූලද්‍රව්‍ය මූලද්‍රව්‍ය නිර්මාණය කරන්නේ කෙසේද යන්නත්, අන්තර්ගතය, පන්තිය හෝ ඔන්ක්ලික් කෝල්බැක් වැනි අමතර ගුණාංග සමඟ වැඩ කරන උදාහරණ එකතු කරමි:

const mountpoint = 'https://jsonplaceholder.typicode.com/users'

const $button = $('button')
const $tbody = $('tbody')

const loadAndRender = () => {
  $.getJSON(mountpoint).then(data => {

    $.each(data, (index, { id, username, name, email }) => {
      let row = $('<tr>')
        .append($('<td>', { text: id }))
        .append($('<td>', {
          text: username,
          class: 'click-me',
          on: {
            click: _ => {
              console.log(name)
            }
          }
        }))
        .append($('<td>', { text: email }))

      $tbody.append(row)
    })

  })
}

$button.on('click', loadAndRender)

.click-me {
  background-color: lightgrey
}

<table style="width: 100%">
  <thead>
    <tr>
      <th>ID</th>
      <th>Username</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
  
  </tbody>
</table>

<button>Load and render</button>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

jQuery කොටුවෙන් පිටත createElement එකකට සමාන නොවේ. ඇත්ත වශයෙන්ම jQuery හි බහුතරයක් අභ්‍යන්තරව සිදු කරනුයේ පිරිසිදු DOM හැසිරවීමට වඩා අභ්‍යන්තර HTML භාවිතා කරමිනි. ඉහත සඳහන් කළ ආදම් ඔබට සමාන ප්‍රති .ල ලබා ගත හැකි ආකාරය මෙයයි.

අභ්‍යන්තර HTML හරහා ඇපෙන්ඩ් ඩොම් , ඩොමෙක් සහ ෆ්ලයිඩොම් වැනි ඩොම් භාවිතා කරන ප්ලගීන කිහිපයක් තිබේ. කාර්ය සාධනය අනුව ස්වදේශීය jquery තවමත් වඩාත්ම ක්‍රියාකාරී වේ (ප්‍රධාන වශයෙන් එය අභ්‍යන්තර HTML භාවිතා කරයි)