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

最新推荐文章于 2024-03-05 14:37:18 发布

qq8693

最新推荐文章于 2024-03-05 14:37:18 发布

阅读量5.4k

点赞数

文章标签： JS BootStrap

本文链接：https://blog.csdn.net/qq8693/article/details/86636831

版权

在使用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