El problema se debe a que no puede agregar etiquetas de inicio/finalización por separado. El DOM funciona con elementos como un todo, por lo que debe crear el elemento div completo en una sola operación.

Dada la descripción de su objetivo, parece que está tratando de envolver el contenido existente en un nuevo div. Como tal, puede usar nextUntil() (suponiendo que los elementos de destino sean hermanos) y luego wrapAll() . Prueba esto:

 jQuery($ => { let $contents = $("#billing_city_field").nextUntil('#apartment_field').add('#apartment_field'); $contents.wrapAll('<div class="column" />'); });

Tenga en cuenta el uso de un atributo de class en el ejemplo anterior, en lugar de aplicar reglas de style en línea.

La pregunta no es muy clara, pero por lo que puedo decir. Creo que tienes un pequeño malentendido sobre lo que .after hace con jQuery. After en este caso es "estructural" y no está relacionado con el "tiempo". Si revisa los documentos de jQuery ( https://api.jquery.com/after/ ) para esto, puede ver básicamente lo que debe hacer.

La forma más sencilla de hacer esto, si estas cosas deben crearse y aún no existen en el body por ejemplo.

 $(function(){ var p = $("<p id='apartment_field'>Paragraph test</p>"); $("body").append("<div id='billing_city_field' style='flex-direction: column;'></div>"); $("#billing_city_field").html(p); });

Paragraph test para que el resultado sea visible más fácilmente.

Y una cosa más, no estoy seguro si es un error con copiar/pegar, pero asegúrese de que # e id no tengan espacios intermedios como este.

 $("#billing_city_field") $("#apartment_field")

Editar: mirando los comentarios, ¿tal vez algo como esto, si ya existen? Deberías aclarar más la pregunta.

 $("#billing_city_field").append($("#apartment_field").detach());