zoukankan      html  css  js  c++  java
  • js运行时异常与table中的内容

    这样一段代码

    <table><tr id="user">

    </tr></table>

    <script>

       document.getElementById("user").innerHTML="<td>hello</td>";

    </script>

    这个时候就会出行  运行时异常

    这是因为在 html  很多标签 如 table tr  这些标签对innerHTML的支持并不好

    但是像div  span 就支持的很好  建议用innerHTML时使用div与span

    这样一段代码

    <table id="user">table>

    <script>

       var table=document.getElementById("user");

      var tr=document.createElement("tr");

      var td=document.createElement("td");

      var div=document.createElement("div");

      div.innerHTML="大家好";

     td.appendChild(div);

    tr.appendChild(td);

    table.appendChild(tr);

    </script>

    这段代码的意思很明显 就是在当前table上添加一行一列 并且行内添加div  显示字体 大家好

    但是调用这段代码后  结果没有任何东西  为什么了

    因为 table的appendChild自能appendChild  table中的下一节点

    table的下一级几点是tbody 所以加不进去 

    修改成这样就可以了

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

    <script>

       var table=document.getElementById("user");

      var tr=document.createElement("tr");

      var td=document.createElement("td");

      var div=document.createElement("div");

      div.innerHTML="大家好";

     td.appendChild(div);

    tr.appendChild(td);

    table.appendChild(tr);

    </script>

    结果出来了 

    就算你只写了<table id="user"><table>

    你打印一下 document.getElementById("user").innerHTML;

    他也会出来一个 <tbody></tbody>

  • 相关阅读:
    null和undefined的区别
    【面试】前端面试题总结一(css)
    【js基础类】火狐的滚动事件
    【Vue】provide和inject
    React学习:react-router-dom-主要组件
    React学习:组合VS继承
    React学习:状态提升
    React学习:form表单
    unity+ARKit 捕捉表情录制动画 表情动画与人形骨骼动画融合
    Unity导入模型材质球无法编辑属性解决方法
  • 原文地址:https://www.cnblogs.com/liaomin416100569/p/9332003.html
Copyright © 2011-2022 走看看