js动态增加html页面元素
问题：
<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页面元素的更多相关文章
- 记录Js动态加载页面.append、html、appendChild、repend添加元素节点不生效以及解决办法
今天再优化blog页面的时候添加了个关注按钮和图片,但是页面上这个按钮和图片时有时无,本来是搞后端的,被这个前端的小问题搞得抓耳挠腮的! 网上各种查询解决方案,把我解决问题的艰辛历程分享出来,希望大家 ...
- 通过JS动态的修改HTML元素的样式和增添标签元素等
一. 通过JS动态的修改HTML元素的样式 1. 要想在js中动态的修改HTML元素的样式,首先需要写document, document我们称之为文档对象,这个对象中保存了当前网页中所有的 ...
- js动态加载HTML元素时出现的无效的点击事件
项目中列表数据中隐藏着详情数据, 图一: 详情数据是:根据当前行的数据作为参数,通过ajax请求到后台返回的数据,再根据返回的结果动态生成HTML页面 图二: js文件中的这些js的点击事件无效: j ...
- JS动态增加删除UL节点LI
JS如何动态增加删除UL节点LI及相关内容. <ul id="ul"> <li id=1>11111111111111111<a href=" ...
- jquery on() bind()绑定的点击事件在js动态新添加的元素生效
方法一:$('.class').on("click",function(){……}); 相当于 $('.class').bind("click",functio ...
- JS动态增加页面上的控件实例
<input type="button" value="继续添加" onclick="append();"/ > & ...
- jquery 动态增加的html元素，初始化设置在id或class上的事件无效
一般情况,我们会在页面初始化完成后对class定义一些全局事件,举个栗子: $(document).ready(function(){ $(".class").on("m ...
- 动态增加表单元素并获取元素的text和value提交
以上是效果图 需求是这样的: 专家设置好条件,然后设备检测到达到相应的条件之后,设备发出提醒给用户. 这就需要专家设置好能看懂的条件之后,然后把给专家看的,正常人能看懂的条件和发送的设备的,设备能够识 ...
- js动态增加秒数（自动，手动）
//获取当前的日期及时间Date var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.get ...
随机推荐
- yarn 0.9.0 build spark
1. 下载scala并安装.版本为2.10.3.设置SCALA_HOME和PATH环境变量 2. 下载SPARK 0.9.0源代码并解压到/root/Downloads/spark-0.9.0-inc ...
- 关于mysql jsp字符编码的问题解决
1.对于post表单的jsp界面,要采用与数据库统一字符编码,在页头设置 <%@ page language="java" import="java.util.*& ...
- jQueryMobile控件之页面切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- struts2 log4j:WARN Please initialize the log4j system properly. 解决方法
在tomcat启动的时候,出现这个警告: log4j:WARN No appenders could be found for logger (org.apache.commons.digester. ...
- C语言实现快排
#include <stdio.h> void swap(int *pa, int *pb) { int t = *pa; *pa = *pb; *pb = t; } int partio ...
- 在线生成CSS样式和兼容的字体格式
http://www.fontsquirrel.com/tools/webfont-generator 在线生成CSS样式和兼容的字体格式.
- Linux内核分析——操作系统是如何工作的
万子惠 + 原创作品转载请注明出处 + <Linux内核分析> 实验部分 使用实验楼的虚拟机打开shell 然后cd mykernel 您可以看到qemu窗口输出的内容的代码mymain. ...
- [转]lua面向对象编程之点号与冒号的差异详细比较
首先,先来一段在lua创建一个类与对象的代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Class = {} Class.__index = Cl ...
- ooize节点的属性控制
<workflow-app name="[WF-DEF-NAME]" xmlns="uri:oozie:workflow:[version]"> & ...
- Java 报表之JFreeChart(第一讲)
1.利用 JFreeChart 创建垂直柱状报表 package com.wcy.chart.bar; import javax.servlet.http.HttpSession; import or ...