How to move elements with Javascript

Question

I am trying to move two elements on load with Javascript. My HTML looks like this:

<body>
    <div class="something">
        <nav class="navbar"></nav>
        <footer></footer>
    </div>
</body>

What am trying to achieve is HTML like this:

<body>
    <nav class="navbar"></nav>
    <div class="something"></div>
    <footer></footer>
</body>

Basically, the nav element below the opening body tag, and the footer at the end.

I did try something like this:

var a = document.getElementsByClassName("navbar");
document.body.appendChild(a);

Can anybody try to help me with this?

.appendChild() inserts an element as the last child of the parent element, hence this is not the right tool for .navbar (but it would work for the footer) — Andreas
– Andreas, Commented Feb 10, 2021 at 11:51
.getElementsByClassName() returns a list of elements. Either access the element with [0] or have a look at .querySelector() + .insertBefore() — Andreas
– Andreas, Commented Feb 10, 2021 at 11:52

T.J. Crowder · Accepted Answer · 2021-02-10 12:11:07Z

2

See comments:

// Get the `.something` element and its parent
const something = document.querySelector(".something");
const parent = something.parentElement;

// Get the `navbar` inside it and move it in front of it
const navbar = something.querySelector(".navbar");
parent.insertBefore(navbar, something);

// Get the `footer` inside it and insert it after it
const footer = something.querySelector("footer");
parent.insertBefore(footer, something.nextElementSibling);

<div class="something">
    <nav class="navbar"></nav>
    <footer></footer>
</div>

After that runs, if you right-click the output pane and look at the HTML, you'll see they're in the requested order (ignore the script that the snippet puts there).

If you have this repeated on a page, all you have to change is how you get the something elements to work on, using a loop:

for (const something of document.querySelectorAll(".something")) {
    // ...rest of the code goes here unchanged...
}

Note that that requires that the NodeList from querySelectorAll is iterable, which it is in modern environments. You can polyfill that for slightly older environments that support iteration but hadn't yet made NodeList iterable as I describe in this answer. For environments that don't support iterability, that link also shows how to polyfill forEach if NodeList doesn't have it, which you'd use like this:

document.querySelectorAll(".something").forEach(something => {
    // ...rest of the code goes here unchanged...
});

edited Feb 10, 2021 at 12:11

answered Feb 10, 2021 at 11:56

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Luke_ Over a year ago

its better to just use ids instead of classes, since classes are meant to be used in multiple while ids are meant to be unique

T.J. Crowder Over a year ago

@Luke_ - I'm using the structure the OP quoted. Also, I don't think ids are needed or relevant here. For instance, suppose it weren't document.body, but something they were doing in a loop over multiple something elements... (That's actually why I used something.parentElement rather than document.body.)

Andreas Over a year ago

For the unaware like me... In OPs example something.nextElementSibling would be null (and a <script> in the snippet) which causes .insertBefore() to act like an .appendChild() call

Mark Baijens · Accepted Answer · 2021-02-10 12:06:11Z

0

You can use inserBefore to do this. My answer is like T.J. Crowder answer but this will work if you have multiple instances of those elements by looping over all found instances.

document.querySelectorAll('.navbar').forEach((el) => {
  el.parentNode.parentNode.insertBefore(el, el.parentNode);
});

document.querySelectorAll('footer').forEach((el) => {
  el.parentNode.parentNode.insertBefore(el, el.parentNode.nextElementSibling);
});

<body>
    <div class="something">
        something
        <nav class="navbar">navbar</nav>
        <footer>footer</footer>
    </div>
    
    <div class="something">
        something2
        <nav class="navbar">navbar2</nav>
        <footer>footer2</footer>
    </div>
</body>

edited Feb 10, 2021 at 12:06

answered Feb 10, 2021 at 12:00

Mark Baijens

13.3k11 gold badges51 silver badges77 bronze badges

Collectives™ on Stack Overflow

How to move elements with Javascript

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related