You need to put items in a div - <div style = 'flex-direction: column;'>.
Div needs to be created after p withid = "billing_city_field"
and closes after the p withid = "apartment_field".
Tried to do it with this function:
jQuery (document) .ready (function ($) {
$ ("# billing_city_field"). after ("<div style = 'flex-direction: column;'>");
$ ("# apartment_field"). after ("</ div");
});
But the div immediately closes. What should I do?
The problem is because you can't add start/end tags separately. The DOM works with elements as a whole, so you need to create the entire div element in one operation.
Given your target description, it sounds like you're trying to wrap the existing content in a new div. As such, you can use nextUntil() (assuming the target elements are siblings) and then wrapAll() . Try this:
jQuery($ => { let $contents = $("#billing_city_field").nextUntil('#apartment_field').add('#apartment_field'); $contents.wrapAll('<div class="column" />'); }); Note the use of a class attribute in the example above, rather than applying inline style rules.
The question is not very clear, but from what I can tell. I think you have a little misunderstanding about what .after does with jQuery. After in this case is "structural" and not related to "time". If you check the jQuery docs ( https://api.jquery.com/after/ ) for this, you can basically see what you need to do.
The easiest way to do this, if these things need to be created and don't already exist in the body for example.
$(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 to make the result more easily visible.
And one more thing, not sure if it's a copy/paste bug, but make sure the # and id don't have any spaces in between like this.
$("#billing_city_field") $("#apartment_field")Edit: Looking at the comments, maybe something like this, if they already exist? You should clarify the question more.
$("#billing_city_field").append($("#apartment_field").detach());