问题：

 
<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

    <script type="text/javascript">

        function AddOrDelModel(modelId){

               if(document.getElementById(modelId).checked){

                     var insertText = "<table><tr><td>"+modelId+"被选中</td></tr></table>"; 

             document.getElementById("insert").innerHTML = document.getElementById("insert").innerHTML+insertText;   

           }else

                {

                     document.getElementById("insert").innerHTML = document.getElementById("insert").innerHTML.replace("<table><tbody><tr><td>"+modelId+"被选中</td></tr></tbody></table>","");

             }

          }

  </script>

</head>

<body>

        <input id="Checkbox1" type="checkbox" onclick="AddOrDelModel('Checkbox1')" value="checkbox1" name="CheckBox1" />

        <input id="Checkbox2" type="checkbox" onclick="AddOrDelModel('Checkbox2')" value="checkbox2" name="CheckBox2" />

    <div id="insert"></div>

</body>

要实现的功能选中checkbox1、checkbox2界面分别显示添加checkbox1、checkbox2被选中,取消选择则分别移除添加的内容.
使用firefox调试显示在添加table的时候会自动多添加<tbody>标签
现在在firefox和chrome运行没有问题，但是其他的浏览器(ie、搜狗等浏览器)就不行了。

回答：

function AddOrDelModel(modelId){

        var insertText = '<table tag=' + modelId + '><tr><td>' + modelId + '被选中</td></tr></table>', insertEl = document.getElementById("insert");

        if(document.getElementById(modelId).checked){

                insertEl.innerHTML = insertEl.innerHTML + insertText;

                }else{

                        var tables = insertEl.getElementsByTagName("table");

            for(var i = 0; i < tables.length; i++){

                if(tables[i].tag = modelId){

                    insertEl.removeChild(tables[i]);

                        break;

                    }

                }

            }

    }

js动态增加html页面元素的更多相关文章

  1. 记录Js动态加载页面.append、html、appendChild、repend添加元素节点不生效以及解决办法

    今天再优化blog页面的时候添加了个关注按钮和图片,但是页面上这个按钮和图片时有时无,本来是搞后端的,被这个前端的小问题搞得抓耳挠腮的! 网上各种查询解决方案,把我解决问题的艰辛历程分享出来,希望大家 ...

  2. 通过JS动态的修改HTML元素的样式和增添标签元素等

    一. 通过JS动态的修改HTML元素的样式   1. 要想在js中动态的修改HTML元素的样式,首先需要写document,    document我们称之为文档对象,这个对象中保存了当前网页中所有的 ...

  3. js动态加载HTML元素时出现的无效的点击事件

    项目中列表数据中隐藏着详情数据, 图一: 详情数据是:根据当前行的数据作为参数,通过ajax请求到后台返回的数据,再根据返回的结果动态生成HTML页面 图二: js文件中的这些js的点击事件无效: j ...

  4. JS动态增加删除UL节点LI

    JS如何动态增加删除UL节点LI及相关内容. <ul id="ul"> <li id=1>11111111111111111<a href=" ...

  5. jquery on() bind()绑定的点击事件在js动态新添加的元素生效

    方法一:$('.class').on("click",function(){……}); 相当于 $('.class').bind("click",functio ...

  6. JS动态增加页面上的控件实例

    <input   type="button"   value="继续添加"   onclick="append();"/ > & ...

  7. jquery 动态增加的html元素，初始化设置在id或class上的事件无效

    一般情况,我们会在页面初始化完成后对class定义一些全局事件,举个栗子: $(document).ready(function(){ $(".class").on("m ...

  8. 动态增加表单元素并获取元素的text和value提交

    以上是效果图 需求是这样的: 专家设置好条件,然后设备检测到达到相应的条件之后,设备发出提醒给用户. 这就需要专家设置好能看懂的条件之后,然后把给专家看的,正常人能看懂的条件和发送的设备的,设备能够识 ...

  9. js动态增加秒数（自动，手动）

    //获取当前的日期及时间Date var myDate = new Date();      myDate.getYear();        //获取当前年份(2位)      myDate.get ...

随机推荐

  1. Linux摄像头驱动学习之：（四）UVC-摄像头驱动框架分析

    UVC: USB Video ClassUVC驱动:drivers\media\video\uvc\ uvc_driver.c分析:1. usb_register(&uvc_driver.dr ...

  2. CircleImageView

    package com.cainiao5.cainiaoheadimg; import android.content.Context;import android.content.res.Typed ...

  3. (转)jQuery Mobile 移动开发中的日期插件Mobiscroll 2.3 使用说明

    (原)http://www.cnblogs.com/hxling/archive/2012/12/12/2814207.html jQuery Mobile 移动开发中的日期插件Mobiscroll ...

  4. linux命令：less

    1.命令介绍: less用来逐页输出文件内容,less相比more功能更加强大,less可以前后翻页,前后搜索. 2.命令格式: less [选项] 文件 3.命令参数: -b <缓冲区大小&g ...

  5. nginx+gunicorn+supervisor+flask @ centos

    /etc/nginx/conf.d/default.conf server { listen 80 default_server; server_name 127.0.0.1; #charset ko ...

  6. WAMPSERVER多站点配置

    1.配置wamp网站地址: 找到wamp的安装目录,如~\wamp\bin\apache\Apache2.4.4\conf\extra\httpd-vhosts.conf 打开httpd-vhosts ...

  7. Backtracking line search的理解

    使用梯度下降方法求解凸优化问题的时候,会遇到一个问题,选择什么样的梯度下降步长才合适. 假设优化函数为,若每次梯度下降的步长都固定,则可能出现左图所示的情况,无法收敛.若每次步长都很小,则下降速度非常 ...

  8. IOS中获取各种文件的路径介绍及方法

    IOS中获取各种文件的目录路径的方法 技术交流新QQ群:414971585 iphone沙箱模型的有四个文件夹,分别是什么,永久数据存储一般放在什么位置,得到模拟器的路径的简单方式是什么. docum ...

  9. VSCode用户设置

    // 将设置放入此文件中以覆盖默认设置 { //-------- 搜索配置 -------- "search.exclude": { "**/node_modules&q ...

  10. C++资料收集&整理

    类别 地址 ZLib c++ zlib(qt)压缩与解压缩 STL STL学习之map容器(2)_insert Basic std::nothrow new (nothrow) T() 的原理 C++ ...