0

Estoy tratando de optimizar un código que está escrito en Javascript y otras partes en Jquery. La pregunta es llana, ¿Qué es más eficiente para crear elementos?

 $(function(){
    //OPCION 1
    $('#myDiv').append('<button id="myBtn">Jquery</button>');
    
    
    
    //OPCION 2
    let btn = document.createElement('button');
    btn.id = 'myBtn';
    let txt = document.createTextNode('Javascript');
    btn.appendChild(txt);
    document.getElementById('myDiv').appendChild(btn);
    
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv">
    </div>

Bienvenidos comentarios

1
  • Dices que quieres optimizar tu código... quizá sea una buena idea que pongas un ejemplo de lo que quieres optimizar, porque es posible que el cuello de botella que tengas no esté en la manipulación del DOM, sino en otro lado. Commented el 6 nov. 2017 a las 15:58

2 respuestas 2

1

Para empezar, hay que recordar que JQuery no es más que una librería escrita en Javascript, así que podemos distinguir entre usar JQuery y no usarlo, pero en ambos casos usas Javascript.

Por otro lado habría que definir qué es eficiencia y en cuánto afecta:

Si vas a crear e insertar miles de elementos, no uses JQuery, porque al fin y al cabo esta librería es una capa de abstrascción sobre el DOM, con lo que afectará al rendimiento.

Si quieres insertar un par de decenas de elementos, la ganancia en tiempo de ejecución será de milisegundos, o centésimas de segundo en el mejor de los casos. Pero a la hora de escribir el código lo mismo tardas la mitad de tiempo que usando el API del DOM nativamente, con lo que la eficiencia durante el tiempo de desarrollo me haría inclinarme a usar jQuery.

En resumen: como casi siempre, todo depende y no hay una respuesta absoluta.

0

Siempre es mejor trabajar con Javascript puro.

Como te mencionan la diferencia es mínima cuando son pocos los elementos que estas creando, sin embargo, la gente se acostumbra a hacer mal las cosas y he llegado a ver desarrollos donde ponen un código inmenso HTML en un append de Jquery porque así están acostumbrados y cuando intentan hacer animaciones no se ven fluidas y tienen algunos parpadeos medios molestos.

Si vas a ocupar Jquery para crear elemento, hazlo de la mejor forma posible creando elemento por elemento y atributo por atributo

//Esto no es recomendable
$('#myDiv').append('<button id="myBtn">Jquery</button>');

//Mejor por partes
var btn = $("<button>").attr("id", "myBtn").text("Jquery");
$('#myDiv').append(btn);

Es mejor hacerlo de esa forma ya que si le pasas todo el html a JQUERY tiene que descomponer la cadena en elementos y atributos

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.