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

How to generate rootless DOM-elements in jQuery?

本文关键字：DOM 元素 jQuery      更新时间：2023-09-26

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

就我而言，我想链接元素，即从

<span>.1.</span>

我想添加<span>.2.</span>

导致 
<span>.1.</span><span>.2.</span>

是否可以在不定义根元素的情况下将元素添加/追加到另一个元素？

到目前为止，我发现的唯一方法是使用 add() 并重新分配结果，但这是好的做法吗？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>TEMPLATE</title>
</head>
<body>
  <div id="main">
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script>
  $(function() {
    var mainRef = $('#main');
    // Using add() and reassignment works (but I have to reassign,...)
    var newElem1 = $('<div>foo</div>');
    newElem1 = newElem1.add("<strong>.1.</strong>");
    newElem1 = newElem1.add($("<strong>.2.</strong>"));
    // append() works with root element (I don't want a root element)
    var newElem2 = $('<div>');
    newElem2.append("<strong>.3.</strong>");
    newElem2.append($("<strong>.4.</strong>"));
    // creating element directly works (but that's not adding)
    var newElem3 = $('<div>.5.</div><div>.6.</div>');
    // append() does not work with an empty root element
    var newElem4 = $('');
    newElem4.append("<strong>.7.</strong>");
    newElem4.append($("<strong>.8.</strong>"));
    mainRef.append(newElem1);
    mainRef.append(newElem2);
    mainRef.append(newElem3);
    mainRef.append(newElem4);
  });
  </script>
</body>
</html>

您似乎正在寻找一个documentFragment，顾名思义，它是文档的一个片段，并且存在是为了暂时保存元素，直到您准备好将该片段添加到文档本身; 例如：

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>.

当fragment追加到<body>实际上只插入<div>时，fragment不再存在。

learn.jquery.com 讨论了

这个问题。解决方案：

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

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

$(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( "" ) );
});
相关文章：