用普通的 javascript 替换 div

发布于 2025-01-15 15:21:20 字数 1275 浏览 5 评论 0原文

我正在寻找一种替换子元素的方法，在下面的代码中，我尝试用 child-div-2 替换 child-div-1，然后用 child-div- 2 by child-div-3，然后 3 by 1 等，在我单击按钮时循环。（此代码是一个示例，在我的实际代码中，parent-div 内还有 4 个其他 div，每个 div 中有 1 个 span 元素..）

编辑：一次只有一个“parent-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;
}

我不知道如何设置：替换儿童（新儿童，旧儿童）；

感谢您的帮助！

原文

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 !

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

难理解 2025-01-22 15:21:20

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>

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>

回复收藏 0 原文

丢了幸福的猪 2025-01-22 15:21:20

使用弹性订单属性

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>

use the flex order property

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>

回复收藏 0 原文

~没有更多了~