使用 jQuery 创建 HTML 元素的最有效方法

在本文中，我们将研究可用于创建 HTML 元素的 4 种 jQuery 技术，并且我们将测试通过不同方法创建元素的代码。

方法：一种更简单的方法是只使用$ (‘

’)这对可读性非常好 但从技术上讲，这段代码将创建一个

元素，但不会将其添加到您的 HTML DOM 中。您需要使用其他一些方法，如append() 、 prepend()等。

建议运行和测试下面的代码并查看创建元素的最快技术，因为代码所用的时间因 Web 浏览器而异。

对于以下代码，您必须将 jQuery 合并到您的代码中。执行此操作的最简单方法之一是将 jQuery CDN 复制并粘贴到您的 HTML 标头标记中。

使用的 CDN 链接：

https://code.jquery.com/jquery-3.5.1.min.js

方法 1：在以下示例中， document.createElement()方法创建 HTML “div”元素节点。 date.getTime() 方法用于返回自 1970 年 1 月 1 日以来的毫秒数。运行以下代码以了解其性能。

句法：

$((document.createElement('div')));

HTML

  
  
  
  


  
    // returns time in milliseconds
    var start = new Date().getTime(); 
  
        for (i = 0; i < 1000000; ++i) {            
            var e = $((document.createElement('div'))); 
        }
          
        var end = new Date().getTime();
        alert(end - start);       
  

输出：

875

方法二：

句法：

$(('
'));

HTML

  
  
  


  
    // returns time in milliseconds
    var start = new Date().getTime(); 
  
        for (i = 0; i < 1000000; ++i) {
            var e = $(('<div>'));     
        }
          
        var end = new Date().getTime();
        alert(end - start);       
  

输出：

1538

方法三：

句法：

$(('
'));

HTML

  
  
  


  
    // returns time in milliseconds
    var start = new Date().getTime();
  
        for (i = 0; i < 1000000; ++i) {
            var e = $(('<div></div>')); 
        }
          
        var end = new Date().getTime();
        alert(end - start);       
  

输出：

2097

方法四：

句法：

$(('
'));

HTML

  
  
  
  


  
   // returns time in milliseconds
    var start = new Date().getTime(); 
  
        for (i = 0; i < 1000000; ++i) {
            var e = $(('<div/>'));
        }
          
        var end = new Date().getTime();
        alert(end - start);       
  

输出：

2037

为了更好地理解，请尝试在 JavaScript 引擎上运行基准测试。

结论： $(document.createElement(‘div’));是最快的方法，即使基准测试也支持，这是使用 jQuery 创建 HTML 元素的最快技术。

原因：这是因为 jQuery 不必将其标识为元素并自行创建元素。

替代方法：仅使用没有 jQuery 的 document.createElement(‘div’)将大大提高效率，并且还会自动将元素附加到 DOM。