Replacing divs with vanilla javascript

I'm looking for a way to replace child element, in the code below, I'm trying to replace child-div-1 by child-div-2, then child-div-2 by child-div-3, then 3 by 1 etc, looping while I click on a button. (This code is an example, in my actual code inside the parent-div there is 4 others divs with 1 span element in each..)

edit : only one "parent-div" at a time, the other ones are on display:none.

HTML CODE EXAMPLE:

    <button onclick="replaceContent()"></button>

<div class="parent-div">
            <div id="child-div-1">
                <span>hello</span>
            </div>
        </div>
<div class="parent-div">
                <div id="child-div-2">
                    <span>world</span>
                </div>
            </div>
<div class="parent-div">
                <div id="child-div-3">
                    <span>test</span>
                </div>
            </div>

JAVASCRIPT ideas & tests :

let parentDiv = document.getElementByClassName('parent-div');
let childOne = document.getElementById('child-div-1');
let childTwo = document.getElementById('child-div-2');
let childThree = document.getElementById('child-div-3');

function replaceContent() {
then I am stuck here;
}

I don't know how to setup this : replaceChild(newChild, oldChild);

Thank you for your help !