javascript获取元素


<body>
    <table border="1px" width="500px">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>

        <tbody id="hhh">
        </tbody>
    </table>

    <script>
          //问题
         var tb = document.querySelector("tbody");
         tb.innerHTML = "<tr><td>123</td><td>456</td><td>789</td></tr>";
    </script>
</body>

效果图

img

<script>
          //修改为有id获取元素
        var but = document.getElementById("hhh");
       but.innerHTML = "<tr><td>123</td><td>456</td><td>789</td></tr>"
    </script>

效果图

img

这是什么原因呀?

这两种都行


 // var tb = document.querySelector("tbody");
        // console.log(tb)
        // tb.innerHTML+= "<tr><td>123</td><td>456</td><td>789</td></tr>";


        var tb = document.getElementById("hhh");
        tb.innerHTML+= "<tr><td>123</td><td>456</td><td>789</td></tr>";

再或者给 表头加个 thead

 <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>

你要是加了 tbody最好把 thead 也加上，要不然就用id获取 。因为tr 也算 tbody的内容 。你直接 innerhtml = 会覆盖 。要不然就拼接 +=

img

这边你可以看到，tbody有两个的，而querySelector() 方法仅仅返回匹配指定选择器的第一个元素,所以你的第一种写法就是替换操作

第一张图里面的序号、姓名都被覆盖了，你打开F12看看就会发现序号那个表格外面也是用tbody包裹的

img

很简单，先不要用js代码。直接浏览器打开你的html代码。然后按下f12，查看文档元素你就会发现有两个tbody标签。而queryselector只会返回选中的最前的第一个，只能返回一个结果。