Javascript 如何在jQuery中生成无根DOM元素？

为了减少DOM操作的数量，我想生成一个临时DOM，稍后将其添加到网页的DOM中

在我的例子中，我希望链接元素，即从

<span>.1.</span>

---

您似乎在寻找一个

文档片段

，顾名思义，它是文档的一个片段，它的存在是为了暂时保存元素，直到您准备将该片段添加到文档本身为止；例如：

var fragment = document.createDocumentFragment(),
    div = document.createElement('div');

// documentFragment not present in the DOM at this point:

fragment.appendChild(div);

// document fragment contains a child element,
// neither of which is present in the DOM.

// appending the document to the document:
document.body.appendChild(frag);

// the <div> is now in the DOM, the fragment
// itself is not, and no longer contains the <div>.

$(function() {
  var myItems = [];
  var myList = $( "#main" );

  for ( var i = 0; i < 10; i++ ) {
      myItems.push( "<div>div-item " + i + "</div>" );
  }
  for ( var i = 0; i < 10; i++ ) {
      myItems.push( "Text-item " + i + ", " );
  }
  myList.append( myItems.join( "" ) );
});

var fragment=document.createDocumentFragment（），
div=document.createElement（'div'）；
//此时DOM中不存在documentFragment：
子片段（div）；
//文档片段包含一个子元素，
//这两者都不存在于DOM中。
//将文档附加到文档中：
文件.正文.附件（frag）；
//现在是DOM中的片段
//本身不是，也不再包含。

当

片段

附加到

后，实际上只插入了

，那么

片段

就不再存在了。

讨论了这个问题。解决方案：

• 将所有元素添加到数组中
• 使用空字符串连接数组
• 最后，将连接的字符串作为元素附加到目标元素

这也适用于文本元素。例如：

var fragment = document.createDocumentFragment(),
    div = document.createElement('div');

// documentFragment not present in the DOM at this point:

fragment.appendChild(div);

// document fragment contains a child element,
// neither of which is present in the DOM.

// appending the document to the document:
document.body.appendChild(frag);

// the <div> is now in the DOM, the fragment
// itself is not, and no longer contains the <div>.

$(function() {
  var myItems = [];
  var myList = $( "#main" );

  for ( var i = 0; i < 10; i++ ) {
      myItems.push( "<div>div-item " + i + "</div>" );
  }
  for ( var i = 0; i < 10; i++ ) {
      myItems.push( "Text-item " + i + ", " );
  }
  myList.append( myItems.join( "" ) );
});

$（函数（）{
var myItems=[]；
var myList=$（“#main”）；
对于（变量i=0；i<10；i++）{
myItems.push（“divitem”+i+”）；
}
对于（变量i=0；i<10；i++）{
push（“文本项”+i+“，”）；
}
myList.append（myItems.join（“”）；
});

这完全取决于OP所说的“根元素”的含义，documentFragment可以存在于文档之外，直到它或其内容被附加到文档中为止。因为它被标记为jQuery，

var fragment=$（document.createDocumentFragment（））@Ben:为什么？我看不出用jQuery包装
documentFragment
有什么好处，不过如果需要，当然可以。如果将其存储在变量中，并将该变量记录到控制台，它应该会告诉您。我现在离电脑（iPad）很远，所以我真的无法检查。正如我在回答中所说的，虽然您似乎想要一个文档片段，但这完全取决于您认为/认为“根元素”是什么，总会有一些东西将多个DOM节点放在一起，无论是创建的元素还是创建的片段，如果您只想在一个重画事件的情况下向DOM添加多个元素，那么我的问题被否决的原因是什么？没有人对此发表评论。是因为我提到了jQuery吗？