How can i wap the position of the label and the input tag with javascript?-CodePudding

I'm using elementor in wordpress, i'cant modify the html directly, so i need to swap both tags with javascript (or css if that's possible) in the form.

The code i'm using in CSS:

    input:focus > .elementor-field-label {
    border: 1px solid black !important;
    border-radius: 5px;
    transform: translate(0px, -20px);
    font-size: 14px;
}

Won't work because of the position of the tags.

Then i tried this code in javascript to do the job:

    $('label').each(function() {
   $(this).insertAfter($(this).nextAll('input:first'));
});

But don't work.

So, how can i make this possible?

FIY: The structure of this specific part of the form is this:

     <div > /*Using just the elementor-field-group*/
          <label for="form-field-name" > Texto </label>
          <input size="1" type="text" name="form_fields[name]" id="form-field-name"  required="required" aria-required="true">
     </div>

CodePudding user response：

With CSS you could do something like this:

.elementor-field-group {
  display: flex;
  flex-flow: column;
}

.elementor-field-group input {
  order: -1;
}

This wouldn't change the HTML structure but visually they would swap position.

With Javascript you can do it like this:

document.querySelectorAll('.elementor-field-group label').forEach((e) => {
    e.parentNode.appendChild(e)
})

This script just takes the label and appends it to the parent again, so it will be the last child of the wrapper.

Or this, to add the input element before the label. This would be the better solution, if there are more than those two elements inside of the wrapper.

document.querySelectorAll('.elementor-field-group input').forEach((e) => {
  e.parentNode.insertBefore(e, e.previousElementSibling);
})