Document.createDocumentFragment() - Web APIs 编辑
Creates a new empty DocumentFragment
into which DOM nodes can be added to build an offscreen DOM tree.
Syntax
var fragment = document.createDocumentFragment();
Value
A newly created, empty, DocumentFragment
object, which is ready to have nodes inserted into it.
Usage notes
DocumentFragment
s are DOM Node
objects which are never part of the main DOM tree. The usual use case is to create the document fragment, append elements to the document fragment and then append the document fragment to the DOM tree. In the DOM tree, the document fragment is replaced by all its children.
Since the document fragment is in memory and not part of the main DOM tree, appending children to it does not cause page reflow (computation of element's position and geometry). Historically, using document fragments could result in better performance.
You can also use the DocumentFragment
constructor to create a new fragment:
let fragment = new DocumentFragment();
Example
This example creates a list of major web browsers in a DocumentFragment
, then adds the new DOM subtree to the document to be displayed.
HTML
<ul id="ul">
</ul>
JavaScript
var element = document.getElementById('ul'); // assuming ul exists
var fragment = document.createDocumentFragment();
var browsers = ['Firefox', 'Chrome', 'Opera',
'Safari', 'Internet Explorer'];
browsers.forEach(function(browser) {
var li = document.createElement('li');
li.textContent = browser;
fragment.appendChild(li);
});
element.appendChild(fragment);
Result
Specifications
Specification | Status | Comment |
---|---|---|
DOM The definition of 'Document.createDocumentFragment()' in that specification. | Living Standard | Initial definition in the DOM 1 specification. |
Browser compatibility
BCD tables only load in the browser
See also
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论