在一个div中加载数据并清除另一个div

Question

我正在尝试加载一个div中的内容并清除另一个div。

所以我有这个身体标签，里面是：

<div class="container">
<div class="row">
<div class="col" id="divs">
<canvas id="div1"></canvas>
<canvas id="div2"></canvas>
</div>
</div>
<div class="row d-flex justify-content-center">
<input type='text' placeholder="Type here..." name='fname' class='chatinput' id='chatinput'>
<input class="shadow mx-3" type="button" value="Play 1" id="clickMe" onclick="animation('div1')" />
<input class="shadow mx-3" type="button" value="Play 2" id="clickMe1" onclick="animation('div2')" />
</div>
</div>

然后当用户点击按钮Play1时，应该加载div1中的内容，当点击div2时，应该清除div1内的内容并加载到div2内。内容加载很好，但当点击Play1时，它加载在div1中，然后当我点击Play2时，它在div2中加载，而不清除div1的内容。我似乎找不到任何解决办法。

function animation(divi) {
var scene = new davePlugin(divi, input);
}

提前谢谢。

更新：

说明：我正试图在点击按钮时加载画布标签内的三维空间，所以当我点击Play1时，三维空间将加载到id为"的画布中；div1’，并且当我点击Play2时，3d空间将加载到画布中；div2"；。我想清除画布的所有内容，然后将内容加载到按钮对应的特定画布id中。

Answer 1

我不清楚你的请求，但我认为这是你的答案

<script>
function animation (element) {
if(elemet === "div1") {
document.querySelector("#div2").innerHTML = "";
document.querySelector("div1").innterHTML = "Hi";
}
else if(element === "div2"){
document.querySelector("#div1").innerHTML = "";
document.querySelector("div2").innterHTML = "Hi";
}
else { return false }
}
</script>

Answer 2

您可以使用这个：

1. 如果只显示文本：

document.getElementById(elementID).innerHTML = ""; 

2. 如果您有在div1下创建的子节点：

function clear() {
var div = document.getElementById(elementID); 

while(div.firstChild) { 
div.removeChild(div.firstChild); 
} 
}