haoxiaolan 2022-07-21 09:09 采纳率: 35.3%
浏览 39
已结题

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

这是什么原因呀?

  • 写回答

4条回答 默认 最新

  • 崽崽的谷雨 2022-07-21 09:15
    关注

    这两种都行 

    
 // 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 = 会覆盖 。要不然就拼接 +=

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(3条)

报告相同问题？

  • tvlang:转换为JavaScript的深奥编程语言
    2021-05-06 22:52
    【标题】：“tvlang: 转换为JavaScript的深奥编程语言”揭示了一种独特的编程语言设计，它与电视节目相关联，旨在提供一种新颖的编程体验。这个项目可能是为了娱乐、教育或者创新编程思维而创建的。深奥编程语言...
  • JavaScript 获取元素的8种方法
    2022-11-28 13:02
    微微的猪食小窝的博客 文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是 DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。我们用JavaScript对网页进行的所有操作都是通过...
  • Javascript-DOM编程艺术研究.docx
    2022-11-17 01:27
    - **内建对象（Native Objects）**，如Array、Math、Date等，是JavaScript语言内置的对象，可以直接使用。 - **宿主对象（Host Objects）**，如`window`对象，由浏览器提供，提供了与浏览器交互的能力，如`window....
  • JavaScript 文档元素获取
    2024-08-11 23:51
    Flec-hazo的博客 Document Object Module ，简称 DOM ，中文名文档对象模型。在网页上，组成页面（又叫文档）的一...DOM 的作用是给 HTML 文档提供一个标准的树状模型，这样开发人员就能够通过 DOM 提供的接口去操作 HTML 里面的元素。
  • JavaScript DOM编程艺术源代码
    2020-10-06 15:31
    【JavaScript DOM编程艺术】是一本深受开发者欢迎的书籍，它主要介绍了如何使用JavaScript语言来操作和改变网页的Document Object Model（DOM）。DOM是HTML和XML文档的结构化表示，允许我们通过编程方式来访问和修改...
  • JavaScriptAPI编程_获取元素_节点操作
    2022-06-21 04:42
    Qayrup的博客 JavaScript获取元素的方式大致有两种 这两种方法都能获取到元素,但是节点操作更简单更有逻辑性网页中所有内容都是节点(标签,属性,文本,注释等),在DOM中,节点使用node来表示. HTML DOM树中的所有节点均可通过...
  • 编程语言之JavaScript
    2024-07-19 00:15
    Linux运维老纪的博客 JavaScript，简称JS，是一种轻量级的解释型编程语言，它是网页开发中不可或缺的三剑客之一，与HTML和CSS并肩作战，共同构建起我们浏览的网页。 今天我们就来了解一下JavaScript，看看它在我们的web前端开发中扮演着...
  • Web开发JavaScript语言教程：基础语法、函数、面向对象编程及DOM操作入门指南
    2025-08-08 17:18
    内容概要：本文档《JavaScript语言教程_3.docx》详细介绍了JavaScript的基础语法、函数、对象与数组、面向对象编程、DOM操作以及异步编程等六大板块内容。基础语法涵盖变量声明、数据类型、运算符和控制结构；函数...
  • 如何在Javascript中获取父元素文本
    2021-04-04 05:22
    标签列表涉及了多种编程语言和技术，如Java、HTML、C#、SharePoint等，但这个问题主要与JavaScript有关。在JavaScript中，处理DOM的方法同样适用于HTML页面，因为JavaScript是浏览器中用于操作HTML的主要脚本语言。...
  • JavaScript语言的网络编程
    2025-01-04 00:50
    疯狂小小小码农的博客 JavaScript作为一种强大的编程语言，在网络编程中展现了其无与伦比的魅力。无论是前端开发中的DOM操作和事件处理，还是后端开发中的HTTP服务器及RESTful API构建，JavaScript都展现了其灵活性和高效性。随着Web技术...
  • 没有解决我的问题, 去提问

问题事件

  • 已结题 （查看结题原因） 7月21日
  • 已采纳回答 7月21日
  • 创建了问题 7月21日