Estoy usando este código para ocultar y agregar una entrada personalizada después de todos los elementos ".word", lo cual es extremadamente lento. Sospecho que esto se debe a que actualiza el DOM y redistribuye el documento cada vez.

¿Hay alguna forma de acelerar esto? El problema es, como puede ver, que cada cuadro de entrada está personalizado con una longitud máxima, una altura de línea, etc. particulares, por lo que me parece que no es posible hacer el procesamiento antes y luego agregar todo al DOM en el final. Tal vez la clonación podría funcionar, pero no sé cómo implementarla.

 var $elems = $(".word"); $elems.each(function(index, value) { var $elem = $(this); var length = $elem.text().length; var width = $elem.width(); var line_height = $elem.css("font-size"); $elem .hide() .after( '<div class="input-group dict-input-group"><input type="text" class="dict" ' + 'style="width:' + width + "px; line-height:" + line_height + ';" ' + 'maxlength="' + length + '" data-text="' + $elem.text() + '">' + '<span class="input-group-append dict-answer d-none"></span></input></div>' ); });