用普通javascript替换div

Question

我正在寻找一种替换子元素的方法，在下面的代码中，我试图用child-div-2替换child-div-1，然后用child-dive-3替换child-dive-2，然后用1替换3等等，在单击按钮时循环。(这段代码是一个例子，在我的实际代码中，父div中有4个其他div，每个div中有1个span元素。(

编辑：只有一个"；父div"；一次，其他的都在展出：没有。

HTML代码示例：

<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思想；测试：

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;
}

我不知道如何设置：replaceChild(newChild，oldChild(；

谢谢你的帮助！

Answer 1

var parents = document.getElementsByClassName('parent-div');
var cnt = 0;
function replaceContent(){
var idx = cnt % 3
parents[idx].classList.remove("show");
parents[idx].classList.add("hide");
idx = (idx + 1) % 3
parents[idx].classList.remove("hide");
parents[idx].classList.add("show");
cnt++
}

.show {
display:block;
}

.hide{
display:none;
}

<button onclick="replaceContent()"></button>
<div class="parent-div">
<div id="child-div">
<span>hello</span>
</div>
</div>
<div class="parent-div hide">
<div id="child-div">
<span>world</span>
</div>
</div>
<div class="parent-div hide">
<div id="child-div">
<span>test</span>
</div>
</div>

Answer 2

使用弹性订单属性

var cnt = 0;
function replaceContent(){
if( (cnt % 2) == 0) document.getElementById("child-div-1").style.order=2;
else document.getElementById("child-div-1").style.order=0;
cnt++;    
}

.parent-div{
display:flex;
flex-direction:column;
}

<button onclick="replaceContent()"></button>
<div class="parent-div">
<div id="child-div-1">
<span>hello</span>
</div>

<div id="child-div-2">
<span>world</span>
</div>

<div id="child-div-3">
<span>test</span>
</div>
</div>