Shuffle a container’s DOM elements but not all in javascript

Trying to shuffle a container’s (a div) DOM elements (other divs) with a particular class name (“div”). Other divs (“extra”) should stay put in the place where they are.

So far I have used the modified shuffle algorithm from link

The code I have almost did the trick but the “Extra” div is appended at the bottom of the stack while it’s supposed to stay atop.

HTML I have:

<div class="divver">

<div class="extra">
Extra
</div>

<div class="div">
1
</div>
<div class="div">
2
</div>
<div class="div">
3
</div>
<div class="div">
4
</div>
<div class="div">
5
</div>
</div>

<button onclick="shuffler()" id="shuffles">
Shuffle 'em
</button>

JS:

let divs = document.getElementsByClassName("div")
let divsNumber = divs.length;
let divver = document.getElementsByClassName("divver")[0]

function shuffler() {
for (var i = divsNumber; i >= 0; i--) {
    if(!divver.children[i].classList.contains("div")) {
    divver.appendChild(divver.children[Math.random() * i | 0]);
}
}
}

JSFiddle

Any hints greatly appreciated.