En este artículo, veremos 4 técnicas de jQuery que se pueden usar para crear un elemento HTML y probaremos el código para la creación de un elemento mediante diferentes métodos.
Enfoque: una de las formas más fáciles es simplemente usar $(‘<div></div>’) que es excelente para la legibilidadpero técnicamente la pieza de código creará un elemento <div> , pero no lo agregará a su HTML DOM. Debe usar otros métodos como append() , prepend() , etc.
Se recomienda ejecutar y probar el código a continuación y verificar la técnica más rápida para crear un elemento, ya que el tiempo que tarda el código varía según el navegador web.
Para el siguiente código, debe incorporar jQuery en su código. Una de las formas más fáciles de hacer esto es simplemente copiar y pegar el jQuery CDN en su etiqueta de encabezado HTML.
Enlace CDN utilizado:
https://code.jquery.com/jquery-3.5.1.min.js
Método 1: En el siguiente ejemplo, el método document.createElement() crea el Node de elemento HTML «div» . El método date.getTime() se usa para devolver la cantidad de milisegundos desde el 1 de enero de 1970. Ejecute el código a continuación para averiguar su rendimiento.
Sintaxis:
$((document.createElement('div')));
HTML
<!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>
Producción:
875
Método 2:
Sintaxis:
$(('<div>'));
HTML
<!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>
Producción:
1538
Método 3:
Sintaxis:
$(('<div></div>'));
HTML
<!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>
Producción:
2097
Método 4:
Sintaxis:
$(('<div/>'));
HTML
<!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>
Producción:
2037
Para una mejor comprensión, intente ejecutar puntos de referencia en motores de JavaScript.
Conclusión : el $(document.createElement(‘div’)); es el método más rápido, incluso los soportes de evaluación comparativa, esta es la técnica más rápida para crear un elemento HTML usando jQuery.
Motivo: es porque jQuery no tiene que identificarlo como un elemento y crear el elemento en sí.
Forma alternativa : usar solo document.createElement(‘div’) sin jQuery aumentará mucho la eficiencia y también agregará el elemento a DOM automáticamente.
Publicación traducida automáticamente
Artículo escrito por sudhanshublaze y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA