问题：

 
<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. Charles的使用

    简介 Charles是在Mac下常用的截取网络封包的工具,在做iOS开发时,我们为了调试与服务器端的网络通讯协议,常常需要截取网络封包来分析.Charles通过将自己设置成系统的网络访问代理服务器,使 ...

  2. OC基础--简介

    OC简介: 1986年,BradCox(布莱德·考克斯)在第一个纯面向对象语言Smalltalk基础上写成了Objective-C语言. 1985年,被赶出苹果公司的Steve Jobs成立了NeXT ...

  3. android使用html+javascript来制作页面

    一般的android界面使用的是XML.但是XML如果要制作很高级的UI,会很复杂.如果使用HTML老进行UI设计就会简单很多. android早就提供了这样的借口. WebView.addJavas ...

  4. c#读取文本文档实践4-读入到list泛型集合计算后写入新文档

    商品 数量 单价英语 66 100语文 66 80数学 66 100化学 66 40物理 66 60 上面截图是要处理的文本文档内容,目的是计算出总价并加在最后一列. 这一篇与上一篇比较类似,目的相同 ...

  5. 在中心交换机前加入多wan口路由，华为中心交换机的学习

    1.前期经过学习,好多笔记不记得了.要慢慢实践,实战中学习一遍, 2.真实情况看图 3.我们没有接路由器的时候,连接cosle口入中心交换机.telnet上去. 命令行:sys_view undo i ...

  6. vim常用命令总结 （转）

    vim 选择文本,删除,复制,粘贴   文本的选择,对于编辑器来说,是很基本的东西,也经常被用到,总结如下: v    从光标当前位置开始,光标所经过的地方会被选中,再按一下v结束. V    从光标 ...

  7. springmvc学习第四天

    数据类型的转换.格式化.校验 1.数据绑定流程 1. Spring MVC 主框架将 ServletRequest 对象及目标方法的入参实例传递给 WebDataBinderFactory 实例,以创 ...

  8. 隐匿在iOS文件系统中的隐私信息

    说明: . 本文仅供安全学习及教学用途,提及的部分技术带有攻击性,请确保合法使用. . “这些都不是我干的,我就负责说出来.” . 图片仅供参考. . 本文所讨论的内容适用于iOS .4环境,其应用程 ...

  9. Modbus工业协议在Android中的应用

    现在工业信息画发展,很多工厂都需要做信息化展示,通常都是利用Android一体机来进行展示和交互. Modbus协议是全球第一个用于工业现场的总线协议,与外设交互可以采用串口通信,tcp等方式:通常在 ...

  10. sed详细分析

    [一.简单描述] sed命令类似命令行的文本编辑器,以行为单位(见注1).除非带命令i(in-place)否则源文件内容并不会被更新.   [二.使用] [2.1.使用方式] 存在两种使用方式: 1. ...