Jquery put elements in div

Issue

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?

Solution

The issue is because you cannot append start/end tags separately. The DOM works with elements as a whole, so you need to create the entire div element in a single operation.

Given the description of your goal it looks 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 above example, instead of applying inline style rules.

Answered By - Rory McCrossan