Как изменить положение элементов HTML с помощью JavaScript

Question

У меня есть сайт в WordPress, и виджет генерирует этот логин, но я хочу изменить положение этих двух элементов, жаль, что я не могу редактировать код html и могу внести изменения только с помощью JavaScript

Я пытаюсь уменьшить красный цвет, а зеленый - вверх

Я имею дело с CSS, но не реагирую, теперь я имею дело с JavaScript, но я не очень опытен с ним

это два элемента HTML

<div class='mo-openid-app-icons'>
<p style='color:#000000; width: fit-content;'> Conectar con Google</p>Login with Google</span></a>
</div> <br><br/>
<a class="lost-pass-link" href="" title="Contraseña perdida">¿Perdiste tu contraseña?</a>                                       
<p class="forgetmenot login-remember">
    <label for="popupRememberme"><input name="rememberme" type="checkbox" value="forever" id="popupRememberme"/>
        Recuérdame                                          
    </label>
</p>
<p class="submit login-submit">
    <input type="submit" name="wp-submit"
    class="button button-primary button-large"
    value="Iniciar sesión"/>

    <input type="hidden" name="redirect_to"
    value="https://bloque10.unimagdalena.edu.co/ovateca/"/>
    <input type="hidden" name="testcookie" value="1"/>
    <input type="hidden" name="nonce" value="77ba00d276"/>
    <input type="hidden" name="eduma_login_user">
</p>

Я очень ценю любую помощь

Answer 1

Вы можете просто взять элемент и добавить его в форму, потому что appendChild() не создает новый элемент, а просто переносит его с места в конец родительского элемента.

let login = document.querySelector('#loginform');
let google = document.querySelector('.mo-openid-app-icons');
// Move login with google to bottom of the form
login.appendChild(google);
// Do you need to delete those <br>?
let brs = login.querySelectorAll('br');
brs.forEach((br) => { br.remove(); });

<form id="loginform">
<div class='mo-openid-app-icons'>
<p style='color:#000000; width: fit-content;'> Conectar con Google</p>Login with Google</span></a>
</div> <br><br/>
<a class="lost-pass-link" href="" title="Contraseña perdida">¿Perdiste tu contraseña?</a>                                       
<p class="forgetmenot login-remember">
    <label for="popupRememberme"><input name="rememberme" type="checkbox" value="forever" id="popupRememberme"/>
        Recuérdame                                          
    </label>
</p>
<p class="submit login-submit">
    <input type="submit" name="wp-submit"
    class="button button-primary button-large"
    value="Iniciar sesión"/>

    <input type="hidden" name="redirect_to"
    value="https://bloque10.unimagdalena.edu.co/ovateca/"/>
    <input type="hidden" name="testcookie" value="1"/>
    <input type="hidden" name="nonce" value="77ba00d276"/>
    <input type="hidden" name="eduma_login_user">
</p>
</form>

Answer 2

Вы можете вставить временный элемент перед синим элементом, а затем поменять местами синие и красные элементы, используя их общий родительский метод Node.insertBefore .

const redDiv = document.querySelector('.red');

const placeholder = document.createElement('span')
const blueP = document.querySelector('.blue');

const parent = redDiv.parentElement;
parent.insertBefore(placeholder, blueP);
parent.insertBefore(blueP, redDiv);
parent.insertBefore(redDiv, placeholder);
parent.removeChild(placeholder);

.red { 
  border: 1px dashed red; 
}
.blue {
  border: 1px dashed blue;
}

<form>
 <div class="red">red</div>
  <br>
  <br>
  <p class="blue">blue</p>
</form>