JavaScript 元素内容交换：完整代码示例和解释
<!DOCTYPE html>
<html>
<head>
<title>元素内容交换 - JavaScript 代码示例</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: lightblue;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
}
.button {
margin-top: 10px;
}
</style>
</head>
<body>
<div id="box1" class="box">
Box 1
</div>
<div id="box2" class="box">
Box 2
</div>
<button class="button" onclick="swapContent()">点击交换内容</button>
<pre><code><script>
function swapContent() {
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var temp = box1.innerHTML;
box1.innerHTML = box2.innerHTML;
box2.innerHTML = temp;
}
</script>
</code></pre>
</body>
</html>
<p>在本教程中，我们演示了如何使用 JavaScript 代码来交换两个元素的内容。首先，我们创建了两个具有相同样式的盒子，并在每个盒子中放置一些文本内容。然后，我们创建了一个按钮，点击该按钮将调用 <code>swapContent()</code> 函数。</p>
<p><code>swapContent()</code> 函数获取到 box1 和 box2 的元素对象，并使用一个临时变量来交换它们的 <code>innerHTML</code> 属性，从而实现了元素内容的交换。最后，我们将函数绑定到按钮的 <code>onclick</code> 事件上。</p>
<p>当点击按钮时，两个盒子的内容将会交换。</p>
原文地址: https://www.cveoy.top/t/topic/pFOk 著作权归作者所有。请勿转载和采集!