问题：

 
<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. IIS调试技巧

    VS2010如何调试IIS上的网站 通常,我们在Visual Studio里调试ASP.NET网站,都是加个断点,然后按F5,在VS自带的虚拟服务器下调试的.但有时候,VS自带的服务器弱爆了,无法满足 ...

  2. hdu 1051 (greedy algorithm, how a little modification turn 15ms to 0ms) 分类： hdoj 2015-06-18 12:54 29人阅读 评论(0) 收藏

    the 2 version are essentially the same, except version 2 search from the larger end, which reduce th ...

  3. iOS 开发获取唯一标识

    在做流量精灵的时候有这样一个需求,帐户默认需要取手机的imsi 信息.这就有一个好处,即便用户删除我们的应用后从新下载,下次进入时他们还会以同样的身份登陆,并且获得原先纪录.这样不仅对于开发公司人员来 ...

  4. Uri.AbsoluteUri 与 Uri.ToString() 的区别

    UriBuilder builder = new UriBuilder("http://somehost/somepath"); builder.Query = "som ...

  5. 使用POSIX正则库匹配一行中多个结果

    正则匹配与正则表达式是什么东西我就不说了,在这里说下POSIX这个c语言正则库在对字符串进行正则匹配时取出多个结果的问题. 首先简单说明下POSIX正则库的几个函数和使用方法 第一个函数:int re ...

  6. 转： SQL Server索引的维护 - 索引碎片、填充因子

    转:http://www.cnblogs.com/kissdodog/archive/2013/06/14/3135412.html 实际上,索引的维护主要包括以下两个方面: 页拆分 碎片 这两个问题 ...

  7. bigworld源码分析（5）——BaseApp分析

    BaseApp负载部分,核心代码缺失...网上的源码中都找不到,暂时没办法分析其核心内容,很遗憾,继续寻找吧,等找到了,再继续自己的分析.

  8. H20的题——[noip2003]银河英雄传（并查集）

    公元五八○一年,地球居民迁移至金牛座α第二行星,在那里发表银河联邦创立宣言,同年改元为宇宙历元年,并开始向银河系深处拓展. 宇宙历七九九年,银河系的两大军事集团在巴米利恩星域爆发战争.泰山压顶集团派宇 ...

  9. Fragment +ViewPager

    public class MainActivity extends FragmentActivity { private ViewPager vp; @Override    protected vo ...

  10. 安装初始化mysql后，默认几个库介绍

    背景介绍:  当我们安装初始化mysql后,默认建了几个数据库,那么这些数据库有什么作用呢?mysql> show databases;+--------------------+| Datab ...