关于innerHtml()插入的代码样式失效

在使用BootStrap框架开发手机适配HTML页面时,遇到通过JavaScript的innerHTML方法动态插入的表格样式失效问题。内容是根据用户输入通过AJAX获取数据,并追加到页面中。发现追加的class="success"未生效,导致表格样式错乱。解决方法是改用jQuery的html()方法,成功避免了innerHTML导致的样式问题,同时也修复了之前遇到的相似BUG。
摘要由CSDN通过智能技术生成

          最近公司要求研发一个手机适应的HTML页面,所以采用了BootStrap框架,页面很简单,就是根据用户输入的四个值,发送AJAX请求,去调用webservice接口得到json数据,把数据通过.innerHTML方法追加到id为neirong的div中,作为一个表格显示在下方,其中表格也是需要带class属性,带有BootStrap的样式。

 <!DOCTYPE html>
<html>
	<head>  
	
		<link href="css/bootstrap.min.css" rel="stylesheet"/>
		<script src="js/jquery-3.2.1.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<meta charset="utf-8" />
		   <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
		<title>信息查询</title>
		<style>
			*{
    
				margin: 0px;
				padding: 0px;
			}
			#all{
    
				padding-top: 30px;
				width: 80%;
				margin: auto;
			
			}
			#gonggao{
    
				padding: 10px;
				border: solid 0px gainsboro;
				border-radius: 10px;
			}
			#tupian{
    
			margin-top:10px;
				text-align:center;
				
			}
			#gonggao p{
    
				padding-left: 20px;
			}
			#neirong{
    
				margin-top: 20px;
				padding: 10px 45px 10px 15px;
				border: solid 0px gainsboro;
				border-radius: 10px;
			}
			#neirong button{
    
				margin: 5px 20px;
			}
			#buttom{
    
				text-align: center;
				padding: 10px;
				margin-top: 20px;
				height: 60px;
			white-space:nowrap;  
			}
			a{
    
				
				padding-left: 2%;
			}
		</style>
	</head>
	
	<body>
		<div id="all">
		<div id="gonggao">
		
		<form class="form-horizontal">
		
  <div class="form-group">
    <label  class="col-sm-2 control-label" >ck:</label>
    <div class="col-sm-10
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值