设置相同的 dom 元素以插入不同的数据答案

【问题标题】：setting same dom element for inserting different data设置相同的 dom 元素以插入不同的数据
【发布时间】：2021-05-04 12:17:26
【问题描述】：

在 JAVASCRIPT 中，我有三个不同的按钮，当我单击第一个按钮时，我想在浏览器中的 html 元素内显示一些 html 数据，当我单击第二个按钮时，我想在同一个 html 元素内显示不同的 html 数据，而且我想要删除以前的数据。与第三个按钮相同。我怎样才能用 JAVASCRIPT 做到这一点？

【问题讨论】：

标签： javascript html dom events click

【解决方案1】：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <main id="container"></main>

    <button id="button1">Button 1</button>
    <button id="button2">Button 2</button>
    <button id="button3">Button 3</button>
 
    <script type="text/javascript">
        const button1 = document.getElementById('button1')
        const button2 = document.getElementById('button2')
        const button3 = document.getElementById('button3')

        const html1 = '<table><tr><td>Table 1</td></tr></table>'
        const html2 = '<table><tr><td>Table 2</td></tr></table>'
        const html3 = '<table><tr><td>Table 3</td></tr></table>'

        button1.addEventListener("click", function() {
            const container =  document.getElementById('container')
            container.innerHTML = html1
        });

        button2.addEventListener("click", function() {
            const container =  document.getElementById('container')
            container.innerHTML = html2
        });

        button3.addEventListener("click", function() {
            const container =  document.getElementById('container')
            container.innerHTML = html3
        });
   </script>
</body>
</html>

【讨论】：

谢谢，但我只有 1 个查询，当我们单击下一步按钮时，以前的 html 数据将如何删除？
当我们点击下一步按钮时，之前的 html 数据当前正在删除，因为您正在替换所有的 innerHTML。如果你只想删除它，你可以做 container.innerHTML = ''
谢谢你太棒了我对这个问题感到困惑，你刚刚解决了这个问题。谢谢