问题：

 
<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. Android SQLiteOpenHelper(一)

    SQLiteOpenHelper api解释: A helper class to manage database creation and version management. You creat ...

  2. Python的平凡之路（10）

    异步IO 数据库 队列 缓存 1.Gevent协程 定义:用户态的轻量级线程.协程拥有自己的寄存器上下文和栈.协程调度切换时,将寄存器上下文和栈保存到其他地方,在切回来的时候,恢复先前保存的寄存器上下 ...

  3. SQL中case when then用法

    sql语句判断方式之一Case.具有两种格式:简单的Case函数.Case搜索函数. 1.简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' E ...

  4. Python 基礎 - while流程判斷

    接續上次的代碼,是不是只有執行一次才就結束,想要再繼續猜,就要在執行一次,是不是有點挺麻煩的? 所以這次我們就來再多做一點點功能進去,讓代碼可以多次循環地執行代碼,Go.... 首先,我們先來了解一下 ...

  5. python 深拷贝与浅拷贝

    浅拷贝的方式有: lst=[1,2,3] (1)直接赋值: lst_cp = lst (2)for循环遍历生成:lst_cp= [i for i in lst] (3)copy模块下,copy.cop ...

  6. hdu4671 Backup Plan ——构造题

    link:http://acm.hdu.edu.cn/showproblem.php?pid=4671 其实是不难的那种构造题,先排第一列,第二列从后往前选. #include <iostrea ...

  7. iOS红马甲项目Bug总结（2）

    背景:iOS调用相机和访问图库 一.调用相机或图库: -(void)imgviewClick { ALAuthorizationStatus author = [ALAssetsLibrary aut ...

  8. Linux的sleep()和usleep()的使用和区别

    Linux的sleep()和usleep()的使用和区别 函数名: sleep头文件: #include <windows.h> // 在VC中使用带上头文件 #include <u ...

  9. java Scanner

    public static void main(String[] args) throws IOException { System.out.print("Enter a number:&q ...

  10. UIAutomator定位Android控件的方法

    UIAutomator各种控件定位的方法. 1. 背景 使用SDK自带的NotePad应用,尝试去获得在NotesList那个Activity里的Menu Options上面的那个Add note菜单 ...