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

在这篇文章中，我们将了解4种可以用来创建HTML元素的jQuery技术，我们将通过不同的方法来测试创建元素的代码。

方法：其中一个比较简单的方法是直接使用$ ('<div></div>')这对可读性很有好处但从技术上讲，这段代码将创建一个<div>元素，但它不会将其添加到你的HTML DOM中。你需要使用其他一些方法，如append(),prepend()等。

建议运行和测试下面的代码，看看创建元素的最快技术，因为代码所花的时间因网络浏览器的不同而不同。

对于下面的代码，你必须将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')));

<!DOCTYPE html>
<html>
<head>
  
  <!-- Embedding jQuery using jQuery CDN -->
  <script src=
"https://code.jquery.com/jquery-3.5.1.min.js"
          integrity=
"sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" 
          crossorigin="anonymous">
  </script>
</head>
<body>
  <script>
    // 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);       
  </script>
</body>
</html>

输出:

方法2:

语法:

$(('<div>'));

<!DOCTYPE html>
<html>
<head>
  <!-- Embedding jQuery using jQuery CDN -->
  <script src=
"https://code.jquery.com/jquery-3.5.1.min.js" 
          integrity=
"sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
          crossorigin="anonymous">
  </script>
</head>
<body>
  <script>
    // 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);       
  </script>
</body>
</html>

输出:

方法 3:

语法:

$(('<div></div>'));

<!DOCTYPE html>
<html>
<head>
  
  <!-- Embedding jQuery using jQuery CDN -->
  <script src=
"https://code.jquery.com/jquery-3.5.1.min.js" 
          integrity=
"sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" 
          crossorigin="anonymous"></script>
</head>
<body>
  <script>
    // 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);       
  </script>
</body>
</html>

输出:

方法 4:

语法:

$(('<div/>'));

<!DOCTYPE html>
<html>
<head>
  
  <!-- Embedding jQuery using jQuery CDN -->
  <script src=
"https://code.jquery.com/jquery-3.5.1.min.js"
          integrity=
"sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
     crossorigin="anonymous">
  </script>
</head>
<body>
  <script>
   // 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);       
  </script>
</body>
</html>

输出:

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

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

原因：是因为jQuery不需要把它识别为一个元素并自己创建元素。

另一种方法。只使用document.createElement(‘div’)而不使用jQuery会提高很多效率，也会自动将元素追加到DOM。