问题：

 
<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. java 内存机制简介

    java内存回收机制 不论哪种语言的内存分配方式,都需要返回所分配内存的真实地址,也就是返回一个指针到内存块的首地址.java中对象是采用new或者反射的方法创 建的,这些对象的创建都是在堆中分配,所 ...

  2. Ubuntu下Speedtest的安装

    要安装Speedtest,需要先安装apache,参见<Ubuntu下Apache的安装>一文:*(再安装LAMP server,参见<Ubuntu下快速安装LAMP server& ...

  3. Goldengate 12.2新特性-自描述的队列文件

    OGG12.2中最大的变化之一就是队列文件是自描述的,意思是不再担心以前版本中,表结构异构的情况,也不再需要defgen生成定义文件,以及不再使用assumeTargetDefs或SourceDefs ...

  4. 如何利用Cloudera Manager来手动安装parcel包

    1.问题的描述: 当你利用Cloudera Manager部署了CDH的集群后,也许随着你的业务需求,你需要对你的就去哪做一些优化,或者扩展之类的,这个时候你可能需要下载安装一些组件.例如,我最近在阅 ...

  5. oop、configparser、xml模块

    本节大纲:一:在python中,有两种编程思想.1:函数式编程.2:oop.无论是函数式编程还是oop都是相辅相成.并不是说oop比函数式编程就好.各有各的优缺点.在其他语言中java等只能以面向对象 ...

  6. redis-persist上线

    九月份惨不忍睹,因为代码质量不够高,直接被Boss喷成了筛子.被反复教育说要高质量的代码,要可维护.高性能…… 幸而,最后一周终于在紧张的加班中,灰度上线redis-land-go了,项目也改名为re ...

  7. 2015GitWebRTC编译实录15

    各个库编译完成后,整合talkapp,联编时还是碰到了一些问题,主要是lib里的源码文件被错误移走,或者宏定义等有问题的,不一而足 FQ访问https://apprtc.appspot.com/,拿到 ...

  8. mactype支持qq浏览器

    win7上使用mactype之后qq浏览器网页显示的字体不清晰,颜色也比较浅.解决方法: 1. 再qq浏览器地址栏中输入:qqbrowser://flags 2.在设置中启用DirectWrite高清 ...

  9. html+css二级菜单制作！

    二级菜单!!<!DOCTYPE html<html lang="e<head> <meta charset="UTF-8"> < ...

  10. 【转载】C/C++中#ifdef和#endif的用法

    转于 http://www.cnblogs.com/renyuan/archive/2013/05/22/3092362.html 今天笔试的时候遇到这个问题,整理一下! 一般情况下,源程序中所有的行 ...