documentfragment

Does jQuery use create document fragment inside each loops?

由 ＊爱你＆永不变心＊ 提交于 2020-04-10 08:44:32
问题 So I've read that jQuery uses document fragments internally to make rendering faster. But I am wondering if anyone knows if jQuery would use createDocumentFragment in this situation where I'm appending img elements to the DOM using the each loop? var displayArray = []; // Lots of img elements $.each(displayArray, function() { $('#imgSection').append(this); }); Or would I need to use this code in order to reduce the number of browser reflows? var displayArray = []; // Lots of img elements var

documentFragment.cloneNode(true) doesn't clone jQuery data

由 纵然是瞬间 提交于 2019-12-24 10:48:07
问题 I have a documentFragment with several child nodes containing some .data() added like so: myDocumentFragment = document.createDocumentFragment(); for(...) { myDocumentFragment.appendChild( $('<a></a>').addClass('button') .attr('href', 'javascript:void(0)') .html('click me') .data('rowData', { 'id': 103, 'test': 'testy' }) .get(0) ); } When I try to append the documentFragment to a div on the page: $('#div').append( myDocumentFragment ); I can access the data just fine: alert( $('#div a:first'

Adding event listeners to elements cloned from the template tag

由 只谈情不闲聊 提交于 2019-12-19 16:13:53
问题 I am creating a lot of DOM elements (each has the same HTML structure) with the <template> tag: <template id="weapon-template"> <div class="button"> <div class="button-price" data-price ></div> <img class="button-image" data-image > <div class="button-name" data-name ></div> <div class="button-damage" data-damage></div> <div class="button-amount" data-amount></div> </div> </template> ... and a few lines of JavaScript: var clone; var template = document.getElementById( "weapon-template" );

Inserting arbitrary HTML into a DocumentFragment

由 放肆的年华 提交于 2019-12-17 07:07:52
问题 I know that adding innerHTML to document fragments has been recently discussed, and will hopefully see inclusion in the DOM Standard. But, what is the workaround you're supposed to use in the meantime? That is, take var html = '<div>x</div><span>y</span>'; var frag = document.createDocumentFragment(); I want both the div and the span inside of frag , with an easy one-liner. Bonus points for no loops. jQuery is allowed, but I've already tried $(html).appendTo(frag) ; frag is still empty

Converting Range or DocumentFragment to string

由 不打扰是莪最后的温柔 提交于 2019-12-12 07:44:53
问题 Is there a way to get the html string of a JavaScript Range Object in W3C compliant browsers? For example, let us say the user selects the following: Hello <b>World</b> It is possible to get "Hello World" as a string using the Range.toString() method. (In Firefox, it is also possible using the document 's getSelection method.) But I can't seem to find a way to get the inner HTML. After some searching, I've found that the range can be converted to a DocumentFragment Object. But

JavaScript: Copy Node to DocumentFragment

由 我只是一个虾纸丫 提交于 2019-12-07 13:00:00
问题 I gather that the whole point of a DocumentFragment is to be able to construct the contents without touching the DOM until it’s ready to go. Given that DocumentFragment doesn’t support innerHTML , it can be a bit tedious. On the other hand, once constructed, it’s easy to add the contents to an existing DOM node by the fragment itself. If I create a div without adding it to the DOM, I can populate it how I like, including innerHTML . As far as I can tell, it should have no additional impact on

JavaScript: Copy Node to DocumentFragment

由 寵の児 提交于 2019-12-05 22:10:10
I gather that the whole point of a DocumentFragment is to be able to construct the contents without touching the DOM until it’s ready to go. Given that DocumentFragment doesn’t support innerHTML , it can be a bit tedious. On the other hand, once constructed, it’s easy to add the contents to an existing DOM node by the fragment itself. If I create a div without adding it to the DOM, I can populate it how I like, including innerHTML . As far as I can tell, it should have no additional impact on performance. Is there a simple way (ie in one line or so) to copy the contents of an existing DOM node

Converting Range or DocumentFragment to string

由 我只是一个虾纸丫 提交于 2019-12-03 10:51:11
Is there a way to get the html string of a JavaScript Range Object in W3C compliant browsers? For example, let us say the user selects the following: Hello <b>World</b> It is possible to get "Hello World" as a string using the Range.toString() method. (In Firefox, it is also possible using the document 's getSelection method.) But I can't seem to find a way to get the inner HTML. After some searching, I've found that the range can be converted to a DocumentFragment Object. But DocumentFragments have no innerHTML property (at least in Firefox; have not tried Webkit or Opera). Which seems odd to

Why does cloneNode need to be used when appending a documentFragment?

由 爱⌒轻易说出口 提交于 2019-12-01 03:51:51
I've been looking at using documentFragments in a Backbone.js app and was wondering why I see examples where "cloneNode" is used when appending the documentFragment to the parent DOM element. An example can be seen here . If you look down at the DocumentFragment section you'll see this: oFrag = document.createDocumentFragment(); for (var i = 0, imax = aElms.length; i < imax; i++) { oFrag.appendChild(aElms[i]); } o.innerHTML = ''; o.appendChild(oFrag.cloneNode(true)); Why does "oFrag" get cloned instead of just appending it? Another blog post doesn't use "cloneNode" (as a comparison). Your

Why does cloneNode need to be used when appending a documentFragment?

由 独自空忆成欢 提交于 2019-12-01 01:10:08
问题 I've been looking at using documentFragments in a Backbone.js app and was wondering why I see examples where "cloneNode" is used when appending the documentFragment to the parent DOM element. An example can be seen here. If you look down at the DocumentFragment section you'll see this: oFrag = document.createDocumentFragment(); for (var i = 0, imax = aElms.length; i < imax; i++) { oFrag.appendChild(aElms[i]); } o.innerHTML = ''; o.appendChild(oFrag.cloneNode(true)); Why does "oFrag" get
订阅 documentfragment