CODEWITHSUNDEEP
javascripthtmlcss
Talked
Talked

Reputation: 173

How to change the position of HTML elements with JavaScript

I have a site in WordPress and a widget generates this login, but I want to change the position of these two elements, it is a pity that I cannot edit the html code and I can only make the change with JavaScript

I'm trying to get the red down and the green up

I deal with CSS, but not responsive, now I am dealing with JavaScript but I am not very skilled with it

enter image description here

enter image description here

these are the two elements of the 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>

I really appreciate any help

Upvotes: 0

Views: 2520

Answers (2)

Triby
Triby

Reputation: 1757

You can just take the element and append it to the form, because appendChild(), doesn't create a new element, just take it from its place to the end of parent.

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>

Upvotes: 1

Typing
Typing

Reputation: 167

You may insert a temporary element before the blue element, then swap the positions of blue and red elements using their common parent's Node.insertBefore method.

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>

Upvotes: 1

Related Questions